10 examples of futuristic CSS3 techniques

by Jean. 50 Comments -

CSS3 has not been here for a long time, but talented designers have already found a lot of great ways to use it to create beautiful and efficient techniques. In this article, I’ll show you the top 10 examples of what you can do using the power of CSS3.

Pure CSS speech bubbles

In a design, bubbles can be great to illustrate a quote. In this article, talented designer Nicolas Gallagher will show you what he built with CSS3: Text bubbles, with no Javascript or images.

Source: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Super Awesome Buttons with CSS3 and RGBA

CSS has always been great to enhance buttons; but using CSS3, the RGBa property, and of course a lot of creativity, you can create modern and clean buttons. The folks at Zurb will show you how in this great tutorial. Note that I enjoyed that technique so much that I used it on my own comment form!

Source: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Classy photo frame using CSS3

As I recently said on my other blog Cats Who Blog, images are very important in blogging, and in the Internet media in general.
In order to enhance your images and give them a unique look and feel, the box-shadow CSS3 property is a must. Here is the code used in the example below:


Source: http://www.change.org/actions/view/tell_the_senate_protect_polar_bears_from_global_warming

Easily Turn Your Images Into Polaroids with CSS3

Although this technique can be considered as experimental only (It doesn’t work on IE, as you can expect…), I have to admit that I was surprised to see that this demo only uses CSS3 and no Javascript at all.
The tutorial will show you how to use CSS3 to transform a simple image into a Polaroid.

Source: http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

Fancy web form with field hints using only CSS3

Web forms are very important because this is the main way for your visitor to get in touch with you. But styling web forms isn’t easy, and in most web sites, forms are boring and quite ugly.
The following post will show you how to use CSS3 to create a stylish web form with field hints. And no, it does not require any Javascript.

Source: http://www.skyrocketlabs.com/articles/css3-web-form-hints.php

CSS3 Drop down Menu

Ah, drop down menus. Those are extremely popular and every designer or developer had to work with at least one in his career. So what about using the power of CSS3 to enhance drop downs? In this article, talented web designer Nick La will show you how to proceed. And I must say that the result is absolutely fantastic.

Source: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

CSS 3 selectors explained

CSS3 has lots of exiting properties, such as box-shadow and border-radius. But CSS3 also introduces new selectors, which can definitely make your life easier.
Although there’s nothing hard with these new selectors, it is important to learn what new selectors are available and how they work, so you can use them in your websites. The following tutorial is simple to follow and extremely efficient; a must read for anyone who works with cascading style-sheets!

Source: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Recreate Mac OSX interface using CSS3

Wow! This one totally rocks. As you can see in the screenshot below, the folks from CSS3.info had fun recreating Mac OSX user interface using CSS3 and some jQuery. Unfortunately, the method they used is not detailed, but you can still view the source and learn by the example.

Source: http://www.css3.info/wp-content/uploads/2007/08/colormoduletest.html

Letterpress Text Effect Using Photoshop and CSS

Typography is definitely something that can either make a design great, or totally ruin it. CSS3 introduced some really interesting properties to enhance the texts and titles of your designs.
In this post, you’ll learn how to create a “Letterpress” effect using CSS3 and Photoshop.

Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/

Creating a Polaroid photo viewer with CSS3 and jQuery

Seems that Polaroid’s are popular again: After the Zurb example I shown you earlier, here is another really cool way to create a gallery, using CSS3 and jQuery. The tutorial is easy to follow and the result is quite nice.

Source: http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Any other really cool example of the power of CSS3? Let me know in a comment!

Comments (50) - Leave yours

  1. Daniel said:

    maybe http://24ways.org/2009/going-nuts-with-css-transitions should be on the list as well? its another take on the whole Polaroid + CSS3 concept.

  2. Vikas Ghodke said:

    Woow superb list.. yeah i agree with you CSS3 and HTML5 is a great choice for front end developer. Thanks for including our link, will try to write more and more tutorial on this new technology.

  3. Kien said:

    the fancy web form is cool. Checked out the demo site and code – wow. Best thing about it is how customizable it is! nice post

  4. Brian said:

    WOW – I guess we’ll have to wait till IE9 comes out and these are effectively cross browser techniques. CSS is getting very clever indeed.

    I do wonder if websites using these effects will all start to look the same. The novelty will wear off quickly I’m sure and we the designers will need to be innovative in our use of these effects and styles.

  5. Daniel Green said:

    I always feels the problem in creating the drop down menu as I am not very good at coding..thanks for the post ans now I think I can make a better drop down..with easy CSS code..

  6. Mat Board said:

    Very cool, I hadn’t realized that you could do such creative (and useful) things with CSS3. Really looking forward to this becoming common on websites and compatible with all browsers. HTML5 looks promising as well.

  7. Kai said:

    Im working alot with with CSS3 on recent projects atm. The new capabilities are really nice to work with an open a lot of new ways and ideas…

  8. Lex said:

    Ok I’m sold, it’s really time I started wrapping my brain around CSS3. Along with HTML5….. the study never ends eh? ;)

  9. Neil Monroe said:

    Good collection, indeed. I have used these on several sites that I have worked on. Primarily the rounded corners and drop shadows. Used in the proper contrast setting, can really add a nice touch and, if done right, degrades almost unnoticeably in browsers that don’t support these features yet (read: IE).

  10. Stevo said:

    Nice list, I’ve started to use CSS3 and just let things degrade in older browsers, text-shadow works in everything except IE8 and below

  11. Chirstopher said:

    Really nice post, we have been searching for interesting ideas to design courier and shipping websites CSS3 definitely would be useful. Has anyone performance degradation from using CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!