We all love CSS but keeping up with the latest techniques can be quite difficult at times. So for your convenience, I’ve compiled five tutorials that showcase useful and innovative techniques that you should know about.

[Just to be clear, I know some form of probably all these techniques may have existed for awhile but I feel these five choices can still be used/improved upon by us developers and/or not fully adapted yet even though they are known by many to be productive. A bump and a nod, if you will.]

1. Perfect Full Page Background Image

by Chris Coyer of CSS Tricks

For a project I worked on in the past, I tried to implement a full page background image via CSS and it is much more difficult than you’d expect. First of all you’re dealing with the scaling issue (because we don’t want white space) and then you have the proportions to worry about and then on top of all that you have to deal with the scroll bars and browser compatibility issues.

Thankfully, Chris Coyer takes you through two techniques (albeit only one technique truly fulfills all the requirements above).

http://css-tricks.com/perfect-full-page-background-image/

2. CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea of A List Apart

If your “images” folder is about to burst because of the sheer quantity and complexity of its contents, we have a winner for you! CSS sprites are basically a grid of images in a single image file that you position and re-position as necessary. You do this to help your production efficiency as you only need to maintain a single file. This technique is an absolute godsend for navigation links states effects.

ALA all-star, Dave Shea outlined these techniques as far back as 2004 and re-visited the subject in 2008.

http://www.alistapart.com/articles/sprites/
http://www.alistapart.com/articles/sprites2/

3. How To Recreate Silverback’s Parallax Effect

By Paul Annett of Think Vitamin

I first saw Jeremy Keith show off the Silverback website at An Event Apart in San francisco last year (2008) and was blown away. Not so much because of how exciting it looked but more because of its elegant coolness factor. The parallax effect can basically be described as multiple background images set at individual visual levels to acheive a nice movement effect when the user changes the browser window size.

British developper, Paul Annett is responsible for the original implementation of this technique for Clearleft (who makes Silverback) and gives us a rundown of how he implemented it for them.

http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/

Other ways to accomplish this technique:
http://forthelose.org/examples-of-and-how-to-do-the-css-parallax-effect
http://webdev.stephband.info/parallax.html

4. CSS: Add a “Loading” Icon To Your Larger Images

by DynamiX Labs

The tricky thing about dealing with large images (or multitudes of images that hog bandwidth) is that during loading it can really mess with your layout and confuse your viewers until the image loads. In other words – a bad first impression with your audience. To remedy this, use a preload image so that they know something is coming and they won’t be alarmed that the page is broken.

DynamiX Labs has a nice solution that is multi-browser compatible and requires no javascript.

http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/

5. Create a Lightbox Effect Only With CSS – no javascript needed (except to close the windows)

by Emanuele Feronato

I am an advocate of Lightbox, Greybox and the other jQuery options to achieve the pop-up effects for opening new windows within a webpage. As they mature, the options for them become more and more impressive. However, sometimes all you need is a simple lightweight option that gets the job done for you without a whole lot of fuss. That’s the beauty of this mostly CSS solution (rudimentary javascript is used to close the window).

For a landing page project that I worked on that had a shelf-life of about a month, I decided to use this technique for a registration form and it worked out great. it was easy and fast to implement and had I appreciated the tiny footprint.

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You may also find these articles useful:

3 Fresh Web Design Ideas
CSS Rehab – 3 Step Program To Getting Clean
Why I Love Expression Engine (CMS)

Did I Miss Something?! Let me know in comments!

This entry was posted on Sunday, August 30th, 2009 at 7:49 pm and is filed under CSS, Inspiration, Top Lists, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.