150+ CSS3 tutorials and examples

There’s no doubt that 2011 can easily become the year of CSS3. In only the first months we have seen the appearance of IE9 and the highly anticipated Firefox 4, both of these browsers offer lots of possibilities that they did not provide in the past, being one of them CSS3 support of course.

On this countdown we have gathered an extended list of CSS3 tutorials that vary from really simple articles where you can master all its main properties and then more advanced tutorials filled with magic that creates astonishing graphics, animations and interactive elements that were impossible to do a couple of years earlier. We have included all sort of tutorials, some of them will guide you through the main CSS3 properties, others will teach you how to make things that only graphic programs were capable of previously; finally, we will be presenting an special segment of tutorials that will show you how to take this language towards epic proportions.

We don’t want to bore you with more data that you probably know at this point, so the only thing that we want to say is that either if you’re a Flash-maniac or just someone who haven’t cared before for programming and design, CSS3 is going to be one of the master tools in the web and graphic business for the next few years. Now it’s time to begin this countdown, hope that you enjoy it as much as we did while writing it.

Advanced pure CSS3 boxes without using images

This tutorial shows you how to make a beautiful set of frame boxes (more than 15) using only CSS3 and zero graphic programs, you won’t believe that this was made with pure code and zero Photoshop.

Compatibility: Webkit

Demo: http://www.webdesignshock.com/demos/css3-boxes/

Real Animation Using JavaScript, CSS3, and HTML5 Video

An enormous tutorial where JS, CSS3 and HTML5 video are used to create an amazing animation.

Compatibility: Google Chrome and Safari 4+.

Demo: http://24ways.org/examples/2010/real-animation/demo5/

Case Study with Html5 + CSS3

One of the most popular design blogs, Abduzeedo released this case study a while ago where you can learn a lot about HTML5 and of course CSS3.

Compatibility: Webkit.

Demo: http://imgs.abduzeedo.com/files/tutorials/css3-cp/template/template.html

Create Animated Landscape using Pure CSS3

Really amusing tutorial that shows how to create an animated landscape with pure CSS3.

Compatibility: Google Chrome and Safari 4+.

Demo: http://acrisdesign.com/demo/Css3animation/demo.html

CSS3 Sidebar Full Height Background Color

Really amusing tutorial that shows how to create an animated landscape with pure CSS3.

Compatibility: Webkit.

Demo: http://aext.net/2010/08/css3-sidebar-full-height-background-color/

How to Draw a Smiley Face with CSS3

There’s definitely a huge potential in CSS3, you wouldn’t imagine yourself making something like a smiley face a few years ago.

Compatibility: Webkit (It’s a sad face in IE lol).

Demo: http://bavotasan.com/tutorials/draw-smiley-face-css3/

Multi-colonnes en CSS3

Helpful tutorial for designers that shows a way of working with columns and CSS3.

Compatibility: Firefox 3.6+, IE9+, webkit.

Demo: http://debray.jerome.free.fr/index.php?articles/Multi-colonnes-en-css3

Border-image en CSS3

Learn how to add custom image borders to your designs on this CSS3 tutorial.

Compatibility: Google Chrome and Safari 4+.

Demo: http://debray.jerome.free.fr/index.php?articles/Border-image-en-css3

CSS3 Adventskalender Tag 18

Originally written in German, this tutorial explores the CSS3 transform properties to generate flipping elements.

Compatibility: Google Chrome and Safari 4+.

Demo: http://webstandard.kulando.de/static/css3-3d-transform

Slider en CSS3 uniquement

Great slider tutorial with pure CSS3 and HTML, no JavaScript included.

Compatibility: Webkit.

Demo: http://debray.jerome.free.fr/demos/slider.html

Créer une image ronde en CSS3

On this tutorial you will learn how to make rounded images using CSS3 and making it compatible for both webkit and non-webkit browsers.

Compatibility: Webkit, older browsers have limited support.

Demo: http://debray.jerome.free.fr/index.php?articles/Images-rondes-en-css3

Multiples backgrounds en CSS3

Using another great CSS3 feature, this tutorial explores the way of implementing different backgrounds within an image.

Compatibility: Webkit.

Demo: http://debray.jerome.free.fr/index.php?articles/Multiples-background-en-css3

Creating a Realistic Looking Button with CSS3

A thorough tutorial that goes deep in the making process of a high quality button using CSS3.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

Create an Advanced CSS3 Menu

The upgraded version of an original tutorial that explains how to create great looking buttons using just CSS3.

Compatibility: Webkit.

Demo: http://blog.cameronbaney.com/tutorials/cbdb-menu-new/demo.html

Create Beautiful CSS3 Typography

In this tutorial you’re going to take a look at how to take basic markup and transform it into a beautiful typographical design with pure CSS3.

Compatibility: Webkit.

Demo: http://blog.echoenduring.com/wp-content/uploads/demos/echo_CSS_typography/demo.html

Create a Slick Menu using CSS3

Nice menu exercise that using pure CSS3 emulates the Dragon Interactive website.

Compatibility: Webkit.

Demo: http://insicdesigns.com/demo/css3/exp2/index.html

Pure CSS3 Animated AT-AT Walker from Star Wars

Awesome CSS3 experiment that takes an AT-AT walker from the classic Star Wars saga and actually makes it move!.

Compatibility: Google Chrome and Safari 4+.

Demo: http://anthonycalzadilla.com/css3-ATAT/index.html

Create a Yoyo with jQuery and CSS3

What could be more fun than learning how to make a nice Yoyo with jQuery and CSS3?.

Compatibility: Google Chrome and Safari 4+.

Demo: http://css-plus.com/examples/2010/04/yoyo-with-jquery-and-css3/

Create a Search Form with CSS3 and jQuery

Besides explaining some good practices in search form design, this tutorial shows how to take advantage of CSS3 to create a good looking search form.

Compatibility: Webkit.

Demo: http://css-plus.com/examples/2010/06/create-a-search-form-with-css3-and-jquery/

How to Create a Fancy CSS3 Menu

This tutorial uses a great deal of CSS3 to develop a fancy drop down menu.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://css-plus.com/examples/2010/12/fancy-css3-menu/

Create a lightbox with CSS3

Although JavaScript is still the best option for making lightboxes, this tutorial demonstrates that CSS3 can join the competence whenever it wants.

Compatibility: Webkit.

Demo: http://css-plus.com/examples/2011/02/css3-lightbox/

Pimp out your Testimonials page with CSS3

A well explained tutorial that studies how to properly utilize CSS3 to prettify a default testimonial page.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://css-plus.com/examples/2011/02/pimped-out-testimonial-page/

3D Text Tower

Very cleaver tutorial that explores the 3D technique as seen in David Desandro’s site.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/3DTextTower/

Adding Stroke to Web Text

Like you do in graphic programs such as Illustrator, with CSS3 you can emulate the text stroke property with ease like shown on this tutorial.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/TextStroke/

CSS3 Button Maker

Awesome CSS3 button maker that works really great in several browsers, though it loses a little bit of quality in non-webkit.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/ButtonMaker/

Old School Clock with CSS3 and jQuery

Taking advantage of the CSS3 “rotate” property, this tutorial shows you how to make a nice retro clock.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/CSS3Clock/

CSS3 Multiple Backgrounds Obsoletes Sliding Doors

An improved version of the sliding doors technique by assigning multiple background images to a single element

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/CSS3-Expanding-Menu/

CSS3 Progress Bars

Without images, you will learn how to make beautiful progress bars that remain pretty in older browsers thanks to a thoughtful design.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/ProgressBars/

CSS3-Only Tabbed Area

An useful method for working with tabs utilizing CSS3. The demo supports all major browsers but Internet Explorer.

Compatibility: Cross-browser (IE9+).

Demo: http://css-tricks.com/examples/CSSTabs/

Fluid Width Equal Height Columns

This tutorial investigates several techniques for accomplishing fluid width equal height columns.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

Grid Accordion with jQuery

Accordions are one of the most popular web elements these days, and in this tutorial you will be using CSS3 to create a great accordion.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/InfoGrid/

Moving Highlight

Inspired on Google Chrome’s navigation, this tutorial shows how to implement a subtle animation in tabs.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/MovingHighlight/

Overriding The Default Text Selection Color With CSS

Utilizing the “selection” property, CSS3 allows you to create fancy text selections to prettify your websites.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/DifferentSelectionColors/

Parallax Background of Stars (plus CSS3 keyframe animation)

An upgraded version of a Parallax background. This new versions uses CSS3 to implement a nice set of animated stars.

Compatibility: Google Chrome and Safari 4+.

Demo: http://css-tricks.com/examples/StarryNightCSS3/

Rotating Feature Boxes

Using CSS3 the tutorial shows you how to rotate featured boxes while displaying a nice animation.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/RotatingBlocks/

iPhone “slide to unlock” Text in WebKit/CSS3

Nice iPhone-like slide button made with CSS3 and jQuery, suitable for Chrome and Safari.

Compatibility: Google Chrome and Safari 4+.

Demo: http://css-tricks.com/examples/SlideToUnlock/

Transparent Borders with background-clip

Inspired on the original Facebox lightbox plugin, this tutorial gives you a complete reference on how to work with transparent borders in CSS3.

Compatibility: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9.

Demo: http://css-tricks.com/transparent-borders-with-background-clip/

Editable CSS3 Image Gallery

Great image gallery design that enlarges the images during a click event.

Compatibility: Webkit.

Demo: http://css-tricks.com/examples/CSS3PhotoGallery/

Box-shadow: shadow effect on elements in CSS3

A helpful tutorial that explains all the aspects of the box-shadow property in CSS3.

Compatibility: Webkit.

Demo: http://css.flepstudio.org/en/css3/box-shadow.html

CSS3 Gradient Image Masks

A very clever tutorial that uses CSS3 gradients as masks to generate pretty cool things.

Compatibility: Webkit.

Demo: http://www.vxjs.org/CSS3/masks/masks.html

Styling Full Width Tabs with CSS3

This tutorial shows how to create full width “browser-like” tabs using pure CSS3 and some HTML5 markup.

Compatibility: Webkit.

Demo: http://cssglobe.com/lab/css3_tabs/01.html

Drawing Calendar Icon With CSS3

Proving once again the mighty power of CSS3, this tutorial shows you how to draw a lovely calendar icon without relying on graphic programs but CSS3 instead.

Compatibility: Cross-browser (IE9+).

Demo: http://cssglobe.com/lab/calendar/01.html

Create an Exploding Logo with CSS3 and MooTools or jQuery

Really fun tutorial that explores the creation of an exploding logo with CSS3, MooTools and jQuery.

Compatibility: Webkit.

Demo: http://davidwalsh.name/dw-content/explode-css.php

Link Nudging with CSS3 Animations

A fancy link nudging effect made with CSS3 and the powerful jQuery library.

Compatibility: Cross-browser (IE9+).

Demo: http://davidwalsh.name/dw-content/css-link-nudge.php

How to create a 3D Cube using CSS3

In this tutorial the author teaches how to build a 3D cube with pure CSS3 and leveraging of the webkit-transform and -moz-transform properties.

Compatibility: Webkit.

Demo: http://depotwebdesigner.com/projets/preview/cube-3d-css3/index.html

How to create a CSS3 Menu using -moz-border-radius

In this example the author explains how to create a menu with CSS3 that uses the -moz-border-radius property.

Compatibility: Firefox 4.

Demo: http://depotwebdesigner.com/projets/preview/radius-menu/radius-menu.html

Use CSS3 to Create a Dynamic Stack of Index Cards

Great exercise that takes advantage of many CSS3 properties such as transform / transition (for the dynamic effects) and @font-face, box-shadow & border-radius (for the styling).

Compatibility: Webkit.

Demo: http://designlovr.com/examples/dynamic_stack_of_index_cards/

Create a Color Changing Website Using CSS3

In this brief tutorial you’re about to go crazy with CSS3 transitions in Webkit to create a simple web page that showcases some really nice color fade effects.

Compatibility: Google Chrome and Safari 4+

Demo: http://designshack.co.uk/tutorialexamples/LightsOnExample/index.html

Create a Fun Animated Navigation Menu With Pure CSS

Great tutorial that explains a nice way to create a fancy animated menu using the @font-face property.

Compatibility: Webkit.

Demo: http://designshack.co.uk/tutorialexamples/AnimatedMenu/animatedMenu.html

Creating the Perfect CSS3 Buttons

One of the best ways of using CSS3 is in button design because with its wide set of possibilities you can create great designs like the ones shown on this tutorial.

Compatibility: Webkit.

Demo: http://devgrow.com/examples/css3buttons/

Cross-browser CSS3 box-shadow

One of the most helpful tutorials of the list, this one explains how to transport many CSS3 properties to lower instances including IE6.

Compatibility: Cross-browser.

Demo: http://fetchak.com/ie-css3/

Amazing Image Hover Effects with Webkit and CSS3

This exercise approaches to the different transition effects offered by CSS3 and displays them in a great demo.

Compatibility: Google Chrome and Safari 4+.

Demo: http://dinolatoga.com/demo/webkit-image-hover-effects/

CSS3 Flip Experiment

Using CSS3, this tutorial explores a great way to generate flipping elements into a website.

Compatibility: Latest Safari version.

Demo: http://dev.graemepirie.com/css/flip/

Multiple Backgrounds (CSS3)

A helpful article that explains a little bit the “multiple background” property that has been implemented in CSS3.

Compatibility: Webkit (Older browsers don’t support this property).

Demo: http://group.mind-productions.com/articles/multiple_backgrounds__css3_/

Rounded Corners, Drop Shadows, Opacity & CSS3

On this tutorial you will learn how to implement drop shadows, rounded corners and opacity in your designs using CSS3.

Compatibility: Webkit.

Demo: http://igeekygirl.com/wp-content/demos/css3.htm

Create a Slick CSS3 Button with box-shadow and RGBA

On this tutorial you will be creating a realistic behaving button with CSS3 using the box-shadow property.

Compatibility: Webkit.

Demo: http://inspectelement.com/demos/css3/buttons/#

Spin those Icons with CSS3

Nice tutorial that teaches to insert a neat spinning property to a series of social icons.

Compatibility: Google Chrome and Safari 4+.

Demo: http://inspectelement.com/demos/css3/iconspin/

Simulate Realism with CSS3

This link will take you to a nice study on how to use CSS3 to generate realistic effects.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://inspectelement.com/demos/css3/realism/polaroids.html

BonBon Sweet CSS3 Buttons

The objective of this tutorial is to create CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

Compatibility: Webkit.

Demo: http://lab.simurai.com/css/buttons/

Create a Stylish Contact Form with HTML5 & CSS3

In this tutorial Chris shows how to make a fancy contact form using HTML5 and CSS3.

Compatibility: Webkit.

Demo: http://line25.com/wp-content/uploads/2011/form/demo/index.html

Create a Vibrant Digital Poster Design with CSS3

Brilliant poster design by Chris Spooner, this tutorial truly demonstrates the power of CSS3 as design tool.

Compatibility: Webkit.

Demo: http://line25.com/wp-content/uploads/2010/css-poster/demo/index.html

Simple Navigation with CSS3 and jQuery

A simple exercise that demonstrates how to create a simple navigation menu with CSS3′s help.

Compatibility: Cross-browser (IE9+).

Demo: http://manos.malihu.gr/tuts/jquery_css3_simple_menu.html

Pure CSS3 box-shadow page curl effect

There’s no tutorial in here properly speaking, but you will find all the code necessary to create this nice set of shadow effects.

Compatibility: Webkit.

Demo: http://matthamm.com/box-shadow-curl.html

Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial you’ll learn how to transform an HTML list into a wall of “sticky notes” using CSS3 and HTML5.

Compatibility: Webkit.

Demo: http://nettuts.s3.amazonaws.com/771_sticky/step5.html

Build Awesome Practical CSS3 Buttons

In an effort to replace all graphic elements for pure code elements, this tutorial shows how to make really nice buttons with CSS3.

Compatibility: Webkit.

Demo: http://s3.amazonaws.com/nettuts/674_cssButton/CSS3_button/index.html

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

In this tutorial you’re going to learn how to build an awesome drop-down mega menu using nice CSS3 features.

Compatibility: Webkit.

Demo: http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

Let’s Create Paper with CSS

By playing a little bit with shadows, gradients and borders you can easily create a nice looking notepad paper with just CSS3.

Compatibility: Webkit.

Demo: http://nettuts.s3.amazonaws.com/894_createPaper/curled_pages/index.html

Mimic Equal Columns with CSS3 Gradients

A very interesting tutorial that utilizing CSS3 gradients creates equal columns that actually have no gradients at all.

Compatibility: Webkit.

Demo: http://nettuts.s3.amazonaws.com/850_cssGradient/cleverGradient/index.html

Pure CSS social media icons (experimental)

This is an experiment that creates social media icons using CSS3 and semantic HTML.

Compatibility: Webkit (best viewed in Chrome).

Demo: http://nicolasgallagher.com/pure-css-social-media-icons/demo/

Pure CSS speech bubbles

This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.

Compatibility: Webkit (best viewed in Chrome).

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

Bokeh with CSS3 Gradients

Beautiful bokeh design powered with CSS3 and ready for implementation.

Compatibility: Firefox 3.6+, Safari 4+ and Chrome 10+.

Demo: http://nimbupani.com/bokeh-with-css3-gradients.html

Vignettes with CSS3 Box Shadows

Great CSS3 approach on how to make a fancy vignette effect without using lots of DIVS.

Compatibility: Non-webkit browsers.

Demo: http://nimbupani.com/demo/css3vignettes/

Pretty CSS3 buttons

The main objective of this tutorial is to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

Compatibility: Webkit.

Demo: http://papermashup.com/demos/css-buttons/

Create a CSS3 Call to Action Button

Beautiful call to action button inspired in a previous Photoshop tutorial by Jacob Gube but on this case created with pure CSS3.

Compatibility: Webkit.

Demo: http://sixrevisions.com/css/create-a-css3-call-to-action-button/

How to Create CSS3 Christmas Tree Ornaments

This tutorial truly displays the magic of CSS3 by making beautiful Christmas ornaments without images.

Compatibility: Webkit.

Demo: http://bit.ly/fBGkai

How to Create Inset Typography with CSS3

On this tutorial you will learn how to take advantage of CSS3 to create a nice pressed typography design.

Compatibility: Webkit.

Demo: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

How to Create Social Media Buttons Using CSS3

And once again, another great tutorial from Six Revisions that takes full advantage of the CSS3 drawing properties by showing how to make a nice set of social icons.

Compatibility: Webkit.

Demo: http://bit.ly/ecfv8e

Creating a CSS3 Generator with CSS3, HTML5 and jQuery

In an effort to explain how all the CSS3 generators out there work, this tutorial will show you how to make one of your own.

Compatibility: Webkit.

Demo: http://spyrestudios.com/demos/css3-generator/

Create a Cute Popup Bar With HTML5, CSS3 and jQuery

On this tutorial you will be creating a bar that pops up at the top of a page, and stays above the content.

Compatibility: Webkit.

Demo: http://spyrestudios.com/demos/cute-bar/

How To Create a Stylish Content Slider using CSS3 & jQuery

On this tutorial you will learn how to create a stylish content slider using CSS3 and some jQuery magic.

Compatibility: Webkit.

Demo: http://spyrestudios.com/demos/stylish-slider/

Create a CSS3 Button that Degrades Nicely

Learn how to make a fancy gradient button in three simple steps thanks to the power of CSS3.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://stylizedweb.com/2009/10/08/create-a-css3-button-that-degrades-nicely/#

CSS3 Background-Clip: Text

On this tutorial our friend Trent Walton teaches how to use CSS3 to create a selectable text inside a background image.

Compatibility: Webkit.

Demo: http://trentwalton.com/bgclip/

CSS3 Background-Clip & @Font-Face

This tutorial explains a pretty cool experiment with background-clip: text and @font-face.

Compatibility: Webkit (the effect will be ruined in older browsers).

Demo: http://trentwalton.com/css3/type/

An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial you’re about to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques.

Compatibility: Webkit (Older browsers will not display the CSS3 properties).

Demo: http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php

Sweet AJAX Tabs With jQuery 1.4 & CSS3

An advanced tutorial that shows how to make an AJAX-powered tab page with CSS3 and the jQuery.

Compatibility: Webkit.

Demo: http://demo.tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/demo.html

Making a Sleek Feed Widget With YQL, jQuery & CSS3

On this tutorial you will be making a sleek feed widget that will fetch any feed and display it in your blog sidebar using CSS3 and jQuery.

Compatibility: Webkit (Older browsers will not display the rounded corners).

Demo: http://demo.tutorialzine.com/2010/02/feed-widget-jquery-css-yql/demo.html

Colorful Sliders With jQuery & CSS3

In this tutorial you will be using jQuery and the new transformation features brought by CSS3 to create a 3D dynamic slider effect.

Compatibility: Webkit (Older browsers will not display the rounded corners).

Demo: http://demo.tutorialzine.com/2010/03/colorful-sliders-jquery-css3/demo.html

Sponsor Flip Wall With jQuery & CSS

Nice flip wall powered with PHP and jQuery plus a fancy CSS3 effect that emulates Photoshop’s Inner Shadow.

Compatibility: Webkit (Older browsers will not play the inner shadow).

Demo: http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

Carbon Fiber Signup Form With PHP, jQuery and CSS3

Create a fancy carbon signup form with jQuery and some CSS3 magic.

Compatibility: Webkit (Older browsers will not display the rounded corners).

Demo: http://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html

Contextual Slideout Tips With jQuery & CSS3

This tutorial shows you how to create a nice set of contextual slideout tips with jQuery & CSS3, ideal for product pages and online tours.

Compatibility: Webkit (Older browsers will not play the CSS3 animation).

Demo: http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html

BounceBox Notification Plugin With jQuery & CSS3

Mixing some jQuery sparks and a few CSS3 you will learn on this tutorial how to insert a nice notification box in your site.

Compatibility: Webkit.

Demo: http://demo.tutorialzine.com/2010/05/bounce-in-box-plugin-jquery/demo.html

CSS3 Minimalistic Navigation Menu

On this tutorial you will be studying how to make a beautiful minimal menu filled with color and movement.

Compatibility: Webkit.

Demo: http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html

CSS3 Animated Bubble Buttons

On this tutorial you will be creating a useful and astonishing set of animated buttons with the power of CSS3 multiple backgrounds and animations.

Compatibility: Webkit (the buttons look dead in older browsers).

Demo: http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/css3-buttons.html

Making Better Select Elements with jQuery and CSS3

This tutorial takes advantage of the “multiple background” property in CSS3 to create a nice drop-down element.

Compatibility: Webkit (Older browsers will not display the CSS3 properties).

Demo: http://demo.tutorialzine.com/2010/11/better-select-jquery-css3/select-jquery.html

CSS3 big style fieldset registration form

The main purpose of this tutorial is to play a little bit with the rounded corners and shadows from CSS3.

Compatibility: Webkit.

Demo: http://tympanus.net/codrops/wp-content/uploads/2009/09/css3_form/css3form.html

CSS3: Creating Web Site Banners

This exercise explores how to make fancy banners with pure CSS3 (no graphics at all).

Compatibility: Webkit.

Demo: http://tympanus.net/codrops/wp-content/uploads/2009/09/css3_banners/css3banners.html

Overlay with Slide Out Box

Learn how to add a nice slide out box with jQuery and add some style to it with CSS3.

Compatibility: Webkit (Older browsers preserve the animation without the style).

Demo: http://tympanus.net/Tutorials/CSSOverlay/

Awesome CSS3 & jQuery Slide Out Button

Inspired on the Photoshop.com site, this tutorials recreates a nice slide out effect with jQuery and adds some style with CSS3.

Compatibility: Webkit (Older browsers can display the animation without the CSS3 styling).

Demo: http://www.tympanus.net/Tutorials/SlideOutButton/

Grungy Random Rotation Menu with jQuery and CSS3

On this tutorial you will be using jQuery and CSS3 to create a nice inclined menu for your site.

Compatibility: Webkit.

Demo: http://www.tympanus.net/Tutorials/GrungyRandomSlideOut/

Interactive Image Vamp up with jQuery, CSS3 and PHP

Funny vamp up exercise made with jQuery and some basic CSS3 properties.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/ImageVampUp/

Elegant Accordion with jQuery and CSS3

Thanks to jQuery you can create nice animated accordions and if you add some CSS3 to the formula, the result will be even nicer as you can see on this tutorial.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/ElegantAccordion/

Pretty Simple Content Slider with jQuery and CSS3

Another great exercise that takes advantage of CSS3 to prettify a jQuery powered slider.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/PrettySimpleContentSlider/

Pimp Your Tables with CSS3

A nice way of leveraging CSS3 to beautify some default tables by adding some really great details.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/CSS3Tables/

Beautiful Photo Stack Gallery with jQuery and CSS3

Nice photo stack gallery made with jQuery and CSS3 and ideal for design or photography websites.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/PhotoStack/

Awesome Cufonized Fly-out Menu with jQuery and CSS3

Learn how to make a full page cufonized menu with some pretty cool features and no images used for its construction.

Compatibility: Webkit (Older browsers can display the menu without the style).

Demo: http://tympanus.net/Tutorials/CufonizedFlyOutMenu/

Slide Down Box Menu with jQuery and CSS3

Although the lead role of this tutorial is taken by jQuery, CSS3 helps to make this menu look much nicer.

Compatibility: Webkit.

Demo: http://tympanus.net/Tutorials/SlideDownBoxMenu/

Related Posts Slide Out Boxes with jQuery and CSS3

A nice set of slide out boxes created with jQuery and CSS3 that can be used to display more of your work.

Compatibility: Cross-browser (IE8+).

Demo: http://tympanus.net/Tutorials/RelatedPostsSlideOuts/

Create Ajax Loading Animation with CSS3

Learn how to achieve an Ajax loading animation effect using only CSS3, no GIF animation required.

Compatibility: Google Chrome and Safari 4+.

Demo: http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

Animated Navigation Menu with CSS3

Useful tutorial where you will learn here to create an animated navigation menu with CSS3.

Compatibility: Google Chrome and Safari 4+.

Demo: http://webdesignersdesk.com/demo/css3menu/

Create Animated Price Grid Using CSS3

On this tutorial you’re going to learn how to make an awesome price grid with pure CSS3.

Compatibility: Webkit.

Demo: http://webdesignersdesk.com/demo/pricegrid/

Beautiful CSS3 Search Form

This tutorial shows you how to make a lovely search bar using the border-radius and box-shadow properties.

Compatibility: Webkit.

Demo: http://www.webdesignerwall.com/demo/css3-search-form.html

Cross-Browser CSS Gradient

This post will show you how to code for the CSS gradient to be supported by the major browsers.

Compatibility: Webkit, older browsers have limited support.

Demo: http://www.webdesignerwall.com/demo/gradient-box.html

CSS3 Dropdown Menu

A Mac-like multi-level dropdown menu created with the border-radius, box-shadow, and text-shadow properties.

Compatibility: Webkit.

Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/

How To Create Customizable Mac Dock With CSS3 Only

Using CSS3 and nothing else, this tutorial explains how to recreate the popular Mac Dock easily.

Compatibility: Webkit.

Demo: http://labs.simonedamico.com/projects/macdock/

Collective: Multi-Step Signup Form with CSS3 and jQuery

In this tutorial you will see how to create a simple signup form with a fancy progress bar using CSS3 and jQuery.

Compatibility: Webkit.

Demo: http://webexpedition18.com/download/signup_form_WebExpedition18/

How To Create a Simple Drop Down Menu With CSS3

On this tutorial you will be reading about how to create a fancy drop down menu with pure CSS3 and zero JavaScript.

Compatibility: Webkit (it loses quality in older browsers).

Demo: http://labs.simonedamico.com/projects/dropdown/

Multi-Line Buttons With Compass, Sass, and CSS3

Another awesome tutorial that shows a way to make fancy buttons without depending on graphic programs.

Compatibility: Webkit.

Demo: http://chriseppstein.github.com/sass-recipes/recipes/multi-line-button/multi-line-button.html

How to Create a Fancy Image Gallery with CSS3

On this tutorial you will learn how to use CSS3 to make an image gallery with animation.

Compatibility: Webkit (Older browsers can display it without the animation).

Demo: http://www.admixweb.com/demos/css3gallery/

Creating an Animated CSS3 Horizontal Menu

Nice exercise that shows a great way to generate an animated menu with pure CSS3.

Compatibility: Webkit.

Demo: http://www.admixweb.com/demos/menucss3/

Creating a Bubble Coda Style with CSS3

This tutorial teaches you how to create a tooltip that displays a nice pop-up window effect.

Compatibility: Webkit.

Demo: http://www.admixweb.com/demos/codabubble/

Experiment: Realistic iPod with CSS3

Awesome CSS3 exercise that illustrates how to create a beautiful iPod classic with no graphics at all.

Compatibility: Webkit (Older browsers will display the iPod with less details).

Demo: http://admixweb.com/demos/ipodcss3/

Create a Sticky Notes app with HTML5, CSS3 and jQuery

Useful tutorial that explains how to develop a small application that creates sticky notes in a browser then and saves them in the local storage of the browser itself.

Compatibility: Webkit.

Demo: http://www.admixweb.com/demos/posticks/

How I Learned to Walk

Awesome tutorial that actually puts a guy walking!, the animation looks specially well in mobile devices (Android, iPhone).

Compatibility: Google Chrome and Safari 4+

Demo: http://www.andrew-hoyer.com/experiments/walking/

Create a Flip Effect by Using CSS3

This tutorial gives a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!.

Compatibility: Google Chrome and Safari 4+.

Demo: http://www.deminoodle.be/wp-content/uploads/demo/Flip_Effect/

CSS3 Tutorial: How To Change Default Text Selection Colour

Using one of the new CSS3 properties, this tutorial explores a way of changing the default text selection color.

Compatibility: Webkit (the effect is not displayed in older browsers).

Demo: http://paulmaloney.net/demo/selection.html

Simple jQuery/CSS3 Modal Box

Learn how to make a modal box to implement in your images, forms, profiles and more.

Compatibility: Webkit (Older browsers will not display the rounded corners).

Demo: http://www.klevermedia.co.uk/tutorials/simple-jquery-css3-modal-box/#

CSS3 Tutorial to Text Clipped Background Transition

Using the text-transition property, this tutorial explains how to generate a nice clipped text.

Compatibility: Google Chrome and Safari 4+.

Demo: http://www.imajine.in/tutorials/css/texttransition.aspx

Better Page Corner Ads with CSS3 Transforms

Based on an author’s experience, this tutorial works his way out on finding the best way of making corner ads with CSS3.

Compatibility: Webkit.

Demo: http://www.impressivewebs.com/demo-files/page-corner/

Create Windows 7 start menu using CSS3 only

Great tutorial that studies how to recreate the Windows 7 start menu using CSS3 only.

Compatibility: Webkit.

Demo: http://www.jankoatwarpspeed.com/examples/windows7menu/

Create Microsoft Office Minibar with jQuery and CSS3

A complete study on how to develop the selection part as it has been featured since Office 2007 using jQuery and CSS3.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://www.jankoatwarpspeed.com/examples/minibar/

3d Animation Using Pure CSS3

Using transform and transition within the perspective property, this tutorial explains how to create a 3d animation using pure CSS3.

Compatibility: Webkit

Demo: http://demo.marcofolio.net/3d_animation_css3/

Display social icons in a beautiful way using CSS3

On this tutorial Marco explores how to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit, all of this within a lovely social icons bar.

Compatibility: Webkit.

Demo: http://demo.marcofolio.net/social_css3_display/

Sweet tabbed navigation using CSS3

Utilizing more than 7 different CSS3 properties, this tutorial shows how to make a really nice navigation menu.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://demo.marcofolio.net/css3_tabbed_nav/

Wicked CSS3 3D Bar Chart

Inspired by a Flash experiment, Marco figured out a way of making these fancy 3d bar charts with CSS3 and he write about that on this tutorial.

Compatibility: Webkit.

Demo: http://demo.marcofolio.net/css3_bar_chart/

Creating a Polaroid photo viewer with CSS3 and jQuery

Make a nice set of Polaroid pictures combining the CSS3 box shadow and rotate properties.

Compatibility: Webkit (CSS3 is not supported in older browsers).

Demo: http://demo.marcofolio.net/polaroid_photo_viewer/

jQuery DJ Hero – CSS3 and jQuery fun

Pure fun with jQuery and CSS3, Marco shows how to make a nice pair of vinyl discs that you can play with.

Compatibility: Webkit.

Demo: http://demo.marcofolio.net/jquery_dj/

The Mac Skype App menu with CSS3 and jQuery

Nice recreation of the basic Skype menu using jQuery and some CSS3 magic.

Compatibility: Webkit (Older browsers will not display the CSS3 properties).

Demo: http://demo.marcofolio.net/skype_menu/

3D Text Using Just CSS

Our friend Mark show us on this tutorial how to make a 3D text using the text-shadow property.

Compatibility: Webkit.

Demo: http://markdotto.com/playground/3d-text/

Fading Button Background Images With CSS3 Transitions

Leveraging some of the CSS3 properties, this tutorial shows you how to make a really nice set of fading buttons.

Compatibility: Webkit.

Demo: http://www.mightymeta.co.uk/demos/fading-background-image/

Sexy Image Hover Effects using CSS3

Inspired by many Flash websites, this tutorial takes jQuery and CSS3 and manages to create some pretty cool hover effects.

Compatibility: Webkit.

Demo: http://www.nikesh.me/demo/image-hover.html

How To Create Depth and Nice 3D Ribbons Only Using CSS3

If ribbons are some of the most popular design elements these days it was just a matter of time before someone figured out how to make them using the famous CSS3.

Compatibility: Cross-browser (IE9+).

Demo: http://www.pvmgarage.com/downloads/ribbon/

Beautiful Looking Custom Dialog Box With jQuery and CSS3

On this tutorial, the author uses CSS3 to generate a pretty cool dialog box with jQuery and CSS3.

Compatibility: Webkit (best viewed in Firefox 4).

Demo: http://www.queness.com/resources/html/project/index.html

Quick tutorial: CSS3 Gradients

On this post the author will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!).

Compatibility: Webkit (IE explanation included).

Demo: http://www.red-team-design.com/wp-content/uploads/2010/11/css-radial-gradient.html

CSS3 Dropdown Menu

On this link you’ll learn how to create your own CSS dropdown menu, without any additional JavaScript code.

Compatibility: Webkit.

Demo: http://www.red-team-design.com/wp-content/uploads/2011/03/css3-dropdown-menu-demo.html

Happy Holidays with CSS3

A random exercise where the author creates a cute Holiday design with CSS3.

Compatibility: Webkit (best viewed in Chrome).

Demo: http://www.red-team-design.com/wp-content/uploads/2010/12/happy-holidays-with-css3-demo.html

How to create a cool and usable CSS3 search box

In this tutorial you’ll learn how create a cool and usable CSS3 search box using the HTML5 placeholder attribute.

Compatibility: Webkit.

Demo: http://www.red-team-design.com/wp-content/uploads/2011/02/css3-search-box.html

HTML5 logo using CSS3

Awesome tutorial that with only CSS3 manages to recreate the HTML5 logo.

Compatibility: Webkit (best viewed in Chrome).

Demo: http://www.red-team-design.com/wp-content/uploads/2011/01/html5-css3-logo-updated.html

Multi-column text using CSS3

Working with multi-columns is now an easier task thanks to CSS3 as this tutorial demonstrates.

Compatibility: Webkit.

Demo: http://www.red-team-design.com/wp-content/uploads/2011/01/multi-column-css3.html

jQuery style menu with CSS3

Using CSS3 the author figured out a nice way of emulate the classical jQuery transitions into an animated menu.

Compatibility: Webkit.

Demo: http://development.tobypitman.com/css/menu.html

CSS3 Chat Bubbles

Quick tutorial that explains how to make lovely chat bubbles with pure CSS3.

Compatibility: Cross-browser (IE9+).

Demo: http://www.vcarrer.com/2010/12/css3-chat-bubbles.html

Radioactive Buttons in CSS3

Beautiful set of “radioactive” buttons made with CSS3 and available for Safari and Chrome.

Compatibility: Google Chrome and Safari 4+.

Demo: http://www.zurb.com/playground/radioactive-buttons

CSS3 Transforms, Transitions, and Animations in Action

Playing with CSS3 and its properties, this tutorial will show you how to make a funny animated owl.

Compatibility: Webkit.

Demo: http://www.shayhowe.com/wp-content/themes/letscounthedays/articles/css3-owl/

Now we have reached the end of this countdown, more than 150 CSS3 tutorials ranging from the easiest to some really challenging experiments, this article can truly be a guide for all the CSS3 fans out there that want to improve their skills or just get impressed with the amazing things that you can achieve with it, thanks for visiting us and we will see you in the next post.