This post was last updated over a year ago, therefore the contents of this post may be out of date.

The momentum of CSS3 is gaining even further despite the efface that the standard hasn’t been finalised. But we see already there are hundreds of tutorial already made to teach designers how to use it. Also unfortunately a lot of them just cover the same ground and of the tutorials teaches us to do things that they may might be not useful. though these techniques can be adapted to fit a project perfectly. Manly in this post I will be featuring only Pure CSS3 tutorials that only used CSS and HTML

Have i missed a tutorial that haven’t been included above, please share yours in the comments.

1. CSS3 Dropdown Menu

This tutorial is written by Nick La from WebDesignerWall. The Mac-like multi-level drop down menu CSS tutorial shows how to create a cross-browser-compatible CSS3 drop down menu that also works in browsers that don’t support CSS3.

2. Create a jQuery Style Content Slider Using Pure CSS

In this tutorial you will create a working example of a jQuery style content slider without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation. You’ll need Safari browser to get the slide animation to work.

3. Pure CSS3 At-At Walker

No JavaScript, No Flash just pure CSS3 to create an animated At-At Walker from Star Wars. The only downside is that it’s currently only viewable in Safari and Chrome (webkit browsers).

4. Create A Dynamic Stack of Index Cards

Create a fantastic animation effect dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

5. Smooth Fading Image Caption

Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. But however you notice that i said in this post title pure CSS3 but you do need JS just to target IE users so they can have a bit of the fun also… But is IE a “popular” browser

6. Create Animated Landscape Only With CSS3

Create animated mountains, clouds and water landscape with css3.

7. The Twitter Fail Whale With CSS3 Only

This isn’t really a tutorial but it just shows how powerful CSS3 really is on how you make the iconic twitter fail whale. Note if you are using IE you really going to see a mega fail whale.

8. Create A Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

9. Subtle CSS3 Typography That Wasn’t Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all in CSS3 baby. Take a look in this video quick tip.

10. Create The Opera Logo With CSS3

In this tutorial you will make the opera internet browser logo using all css3.

11. Create A Vibrant Digital Poster Design With CSS3

You will be making a Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

12. Create Animated Price Grid Table

So here today we will create an animated Price grid using css3 only. No Jquery No Images No flash at all.

13. Sticky Notes With CSS3

You’ll be learning on how to make sticky notes. Each note has a background gradient to give it the sticky note color. The note is rotated ever-so-slightly with a transform and decorated with a little box shadow for a 3D effect.

14. Build Awesome Practical CSS3 Buttons

Modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons

15. Pure CSS Social Media Icons

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an un-ordered list of text links into a set of icons without the use of images or JavaScript.


15 Astonishing Pure CSS3 Tutorials