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!

  • http://php.quicoto.com quicoto

    I knew the first one.

    I’m going to check out the others.

    Thanks!

    • http://npxp.com Kamal Hasa

      CSS3 has definitely revolutionized the designing world.

      • http://lukedurrant.com Luke

        Not really.
        It just makes some of the design techniques that people have been doing in print media possible in a browser

  • http://cmstutorials.org krike

    wow nice list :D

  • http://www.webtechwise.com/ Omer Greenwald

    Impressive examples of CSS3 uses, thanks!

  • http://edercosta.zigotto.com.br Éder Costa

    Fantastic!!!!

  • Pingback: 10 examples of futuristic CSS3 techniques -HackIX

  • Pingback: uberVU - social comments

  • http://www.shareyourride.net Daniel

    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.

  • http://siftage.com Brad Proctor

    This is amazing! I didn’t know half of this stuff was even possible with CSS yet. I guess I really need to get up to speed on CSS3.

  • http://inurd.me Eddie

    Fantastic article! Can’t wait till’ CSS3 becomes standardized. :)

  • http://www.gameranx.com/ Atul Kash

    Speech bubbles are amazing. Thanks for the great collection

  • http://acrisdesign.com Vikas Ghodke

    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.

  • Pingback: Most Tweeted Articles by Digital Photography Experts

  • http://www.digitalovercast.com Kien

    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

  • Pingback: Bookmarks for March 23rd from 17:13 to 17:18 | jansroka.com

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Love the photo framing effects, already starting implementing into my form designs. Thanks for sharing.

  • http://balgle.designerteam.info/ Beth McLain

    That is one amazing collection of jquery based teachings!! Good work.

  • http://www.flamescorpion.com Lucian Apostol

    I’m already tired by doing this with images for backgrounds, corners and javascript.

  • http://www.ilovebulgaria.ru Ivaylo

    Nice effects! I will do in form feed-back it the my internet site of fancy web form with field hints necessarily.

  • http://www.deltainsurance.co.uk Brian

    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.

  • Pingback: links for 2010-03-24 « /home/servrrockr

  • Pingback: links for 2010-03-26 « 個人的な雑記

  • Pingback: Bookmark 2010/03/26 « Desired

  • http://digitalweddingsecrets.com/ Daniel Green

    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..

  • http://www.bdmatboard.com Mat Board

    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.

  • http://www.biostim.com.au/ Tim

    The polaroid example looks great.

  • http://kkoepke.de Kai

    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…

  • Pingback: A vueltas por la red… | soy un zote

  • http://www.reviewclinic.co.uk Shane

    Great post, CSS3 has some really nice effects and really makes it easier to build a nice looking website.

    Thanks for sharing.

  • http://www.aaronvailsblog.com Aaron Vail

    very awesome! Thanks for the post! very helpful! I can use these in my new site!

  • http://yoyurec.in.ua YoYurec

    css3 buttons really cool!

  • http://knowledgecity.com Jae Xavier

    Moar (More) CSS3 techniques! Yay! Lots of stuff I did not know about that can make my life a lot easier.

  • Pingback: Futuristische CSS3-Techniken

  • http://www.donnatellidesign.com Paul Donnatelli

    Great List, Thank you.
    I have not had the chance to really dig into CSS3, I am wondering if degradation will be a large issue?

  • http://www.troy-ounce.com Lex

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

  • Bob Wallace

    “CSS3 has lots of exiting properties, ”

    Exiting properties??? I assume you meant exciting

  • http://tetovazegalerija.blogspot.com Tetovaze

    Nice list i am particularly interested in text effects with photoshop and css3!Thanks!

  • http://www.microwebnet.com/ Aleks

    “CSS3 Drop down Menu ” is very usfull. We can see it in many sites. It is not dificilt to do it. Only read the article.

  • Neil Monroe

    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).

  • http://www.rajesharma.com broncha

    css3 definitely is changing the web !!!!

  • http://www.stopsmokingnowguru.com Frank Schmid

    Wonderful post! CSS3 will be the way of creative changes for the future.

  • http://www.youtube.com/watch?v=uEr-DG7g__8 Jamie

    Thanks for incorporating this list. I like the classy photo frames technique. Futuristic indeed.

  • http://binary-scenery.co.uk Stevo

    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

  • http://www.bidtoship.co.uk/courier Chirstopher

    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

  • http://jayseeblabs.blogspot.com Jaysee Pingkian

    Great compilation! Will be using some CSS3 Techniques on my blog soon

  • http://www.mavermedia.com/blog Brad Maver

    Great post. Those are some pretty cool techniques. Thanks for sharing!

  • http://www.jsxsolutions.co.uk/ mark

    CSS3 is so awesome. :D

  • http://www.brettwidmann.com Brett Widmann

    I really like these examples. CSS3 has come a long way and it looks amazing!

  • http://www.honourchick.com/blog honour chick

    very useful tutorials… thanks for sharing these.