13 Pure CSS Techniques for Creating JavaScript-like Interactions

Posted by Henry Jones on May 18, 2010 | 24 Comments

We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

How To Create a Pure CSS Polaroid Photo Gallery

Creating a Bubble Coda Style with CSS3

Accordion using only CSS

How to Create a Fancy Image Gallery with CSS3

CSS3 Hover Tabs without JavaScript

Create a JQuery Content Slider Using Pure CSS

How to Create a Valid Non-Javascript Lightbox

Pure Css Data Chart

Bubble Effect with CSS

CSS Image Switcher

Pure Css Line Graph

CSS Image Switcher

Pure CSS Timeline

Here's some other articles that you will definitely find useful.

20 Fresh CSS3 Tutorials

Developing Streamlined and Efficient CSS Styles

HTML5 & CSS3: Take Your Design to Another Level

7 Useful Resources to Help You Learn HTML5

10 HTML5 Demos to Make You Forget About Flash

24 comments

AEXT.NET MAGAZINE
May 18, 2010
Hi Henry, nice showcase and thanks for including my tutorial here! Much appreciated!
Reply
Rilwis
May 18, 2010
Very nice effect. Hope CSS3 is fully supported in all browsers soon.
Reply
tgpo
May 18, 2010
If only I could use these. Unfortunately, I still have to support IE6. When will that browser ever die?
Reply
Webstandard-Blog
May 18, 2010
Very nice collection, but if you want some more don’t miss Bouncing Navigation (CSS3-Animation Tutorial)!
Reply
Ben Petersen
May 18, 2010
Ha! CSS3 will definitely rock when it is fully supported.
Reply
Vladimir
May 18, 2010
The potential of the CSS3 is just incredible.

Few weeks ago I published CSS3 Action Framework http://code.google.com/p/css3-action-framework/ and many things that I wrote in JavaScript today can be done with CSS3.
Reply
- claudio
  May 18, 2010
  Hey, i saw that, i has something similar in mind. i created (…still working…) on a tool: “class optimizer”, designed to select the classes that you really use out of a framework, the link is below cheers…
  
  http://bit.ly/93sBVe
  Reply
Sumeet Chawla
May 18, 2010
CSS3 is really powerful and a lot of jQuery tricks will become obsolete once CSS3 is standardized and supported by all the browsers

I didn’t like the content slider (even though props to the author for implementing it in such an awesome way) because if the user wants to go to the previous page, then on clicking the back button, the previous slide is being displayed rather than going to the previous page
Reply
Damian Smith
May 18, 2010
I didn’t realise how much you could actually do with CSS3!

All I have been using so far is drop shadows and the odd curved corner. It’s a shame really because I do like my sites to be as compliant as possible and usually have the w3c compliance on the bottom of every site, but using these techniques that is no longer possible… although… I found a way to link it so it shows CSS3 compliance results only

Other downer is the amount of people that will actually be able to view CSS3! Im pretty sure that most people still use IE and IE is poor with CSS3.

Still, some really nice examples of CSS here, really like the Polaroid photo effect, would work well with a lightbox gallery or obviously a CSS version.
Reply
Jordan Walker
May 18, 2010
Very nice list of effects. CSS is starting to come into its own.
Reply
Sara
May 18, 2010
Thanks for the great tips!
Reply
Chris Mower
May 18, 2010
Love it! Thanks for sharing.
Reply
@scottcorgan
May 18, 2010
Dang, I was excited about JQuery. I guess I have to get excited that IE probably owns Javascript and therefore won’t support the CSS that kills it. Hmm, conspiracy?
Reply
Teylor Feliz (Admix Web)
May 18, 2010
Thanks for including my two tutorials, “How to Create a Fancy Image Gallery with CSS3″ and “Creating a Bubble Coda Style with CSS3.” I am very honored to be included! Great list and Thanks for sharing!
Reply
Shaimifch
May 18, 2010
Hi Henry! thank you a lot for the awesome compilation.
Reply
Iowa personal
May 18, 2010
Great collection thanks for the round up filled with tutorials and advice.
Reply
Michael Pehl
May 18, 2010
Thanks for sharing. Some stuff will be pretty useful
Reply
Anything Graphic
May 18, 2010
Dude, this is freaking awesome and so useful. Thank you for such a great compilation!
Reply
Xcellence IT
May 19, 2010
awesome collection of tutorials…

thanks for sharing this wonderful resources…

I’m going to put css polaroid photo gallery in of our clients’ site i’m working on…

thanks for this great idea…

Xcellence IT
Reply
ddeja
May 19, 2010
Great collection! Can’t wait to use some of those techniques on my websites. Becouse of the JS they are getting heavier and heavier every day…

Thank you one more time.
Reply
Teylor Feliz
May 19, 2010
I would to add the Animated CSS3 Horizontal Menu too.
Reply
Pete
May 20, 2010
Exciting times ahead!
Reply
Tim
August 2, 2010
You put “CSS Image Switcher” twice, the second time wrongly titling the CSS form hints tut
Reply
Blending Colours
February 13, 2012
Very useful stuff. Thx for links!
Reply