Clever Problem Solving Techniques for CSS

With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers.

Below are clever ways to leverage CSS3 for Web developers:

Responsive Images

Responsive web design allows a design to scale perfectly based on the context. Responsive images function in a similar way where images are sized based on whether they are rendered on a handheld or a desktop interface.  This scaling takes into consideration that the HTML, CSS and JavaScript used is light enough to be rendered reasonably fast across these platforms.  Any images that need to be loaded responsively are referenced from the mobile-friendly version of the image size by adding a “.r” prefix to the file extension and using the “data-fullsrc” HTML5 custom attribute to determine the image screen resolution.

Progress Bar

Did you know that you can create a fancy progress bar without using flash or even images? To achieve this stunning effect, you will need an HTML file that contains your markup, a CSS file for your styles and a JavaScript library file called “progress.js” that will contain the needed JQuery animations to animate the progress bar. Inside the CSS file are 2 classes; the .ui-progress-bar which acts as the container and the .ui-progress class which contains the green progress bar.  The CSS file can be downloaded from this link: http://ivanvanderbyl.com/

Image Transitions

Very elegant transitions can be applied to images using JQuery plugins such as Nivo Slider. While most of these plugins use JavaScript, it is possible to implement image transitions using CSS3 animations.  CSS3 transitions have the advantage of producing new effects like rotations which JavaScript plugins like Nivo Slider cannot.  Whether you are implementing bars, blocks, warps or concentric image effects, CSS3 can be used for these kinds of animations.

Cool Text Effects

By playing around with colors, offset and blurring effects in CSS3, it is possible to create some stunning and clever text effects. Some cool text effects that can be produced using CSS3 include retro or vintage, inset, neon, fire and anaglyphic among others. The neon effect, for example, works by creating up to 8 shading levels where each of the 8 shadow values are increased progressively while getting them darker. The white fill text base and the darker effect blend to produce the neon aura.

Shapes in CSS

Almost any shape can be drawn using CSS and a single HTML element. After defining the shape in your CSS, you can then define the dimensions and other attributes such as the transparency, color and border options. The code below draws up a red triangle facing up:

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

Folded Corner Effect

This technique does not need any extra markup and is implemented using these few lines below:

.note:before {

Content:””;

Position:absolute;

Top:0;

Right:0;

Border-width:0 16px 16px 0;

Border-style:solid;

Border-color:#658E15 #fff;

}

As HTML5 and CSS3 continue to gain traction on the Web, we can expect to see developers coming up with more creative and clever ways of implementing these relatively new techniques in their work.

SHARE THIS POST
  • http://mustified.com/ Mustified

    Very helpful tips and techniques.

    Thanks

  • billracine

    I’d like to see an example of the Responsive Images. Are you storing all of the individual image sizes or is the browser just resizing the image for the display?

    I’m hoping to avoid having to send a 2mb image over 3G (or worse) when all they need is a 128k image.

    • http://www.fwpolice.com/ The Fireworks Police

      Responsive images typically are created using width: 100%; and the size controlled by a container. So the browser is not re-rendering the image nor resizing; instead, it’s scaling the image to fit that container.

      It is strongly recommended that you don’t use images over 1mb on responsive design (I wouldn’t go over 200kb to be on the safe side).

    • schadeck

      I agree, It would be great to see an example of your process for responsive images.

  • http://twitter.com/RodescoDesign David Rodriguez

    Good article although I thought the title was a bit misleading. Not really problem-solving techniques but more like cool tricks. A problem solving technique should be something that could be applicable to many types of different situations. Just my two cents. Little let down by the title.

  • http://www.facebook.com/DavGit David Gitonga

    Hi Rodriguez. Depends on how you look at it. The article discusses CSS techniques that replace other techniques or methods that have become outdated, essentially resolving age-old problems using modern techniques.