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.
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/
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/
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
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
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/
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/
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
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
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
Great slider tutorial with pure CSS3 and HTML, no JavaScript included.
Compatibility: Webkit.
Demo: http://debray.jerome.free.fr/demos/slider.html
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
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
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/
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
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
Nice menu exercise that using pure CSS3 emulates the Dragon Interactive website.
Compatibility: Webkit.
Demo: http://insicdesigns.com/demo/css3/exp2/index.html
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
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/
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/
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/
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/
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/
Very cleaver tutorial that explores the 3D technique as seen in David Desandro’s site.
Compatibility: Webkit.
Demo: http://css-tricks.com/examples/3DTextTower/
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/
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/
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/
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/
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/
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/
This tutorial investigates several techniques for accomplishing fluid width equal height columns.
Compatibility: Webkit.
Demo: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/
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/
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/
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/
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/
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/
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/
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/
Great image gallery design that enlarges the images during a click event.
Compatibility: Webkit.
Demo: http://css-tricks.com/examples/CSS3PhotoGallery/
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
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
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
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
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
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
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
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
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/
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
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
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/
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/
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/
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/
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_/
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
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/#
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/
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
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/
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
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
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
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
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
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
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
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/
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/
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
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/
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/
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/
This tutorial truly displays the magic of CSS3 by making beautiful Christmas ornaments without images.
Compatibility: Webkit.
Demo: http://bit.ly/fBGkai
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/
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
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/
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/
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/
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/#
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/
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/
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
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
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
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
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
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
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
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
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
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
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
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
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
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/
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/
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/
Funny vamp up exercise made with jQuery and some basic CSS3 properties.
Compatibility: Webkit.
Demo: http://tympanus.net/Tutorials/ImageVampUp/
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/
Another great exercise that takes advantage of CSS3 to prettify a jQuery powered slider.
Compatibility: Webkit.
Demo: http://tympanus.net/Tutorials/PrettySimpleContentSlider/
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/
Nice photo stack gallery made with jQuery and CSS3 and ideal for design or photography websites.
Compatibility: Webkit.
Demo: http://tympanus.net/Tutorials/PhotoStack/
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/
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/
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/
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/
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/
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/
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
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
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/
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/
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/
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/
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
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/
Nice exercise that shows a great way to generate an animated menu with pure CSS3.
Compatibility: Webkit.
Demo: http://www.admixweb.com/demos/menucss3/
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/
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/
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/
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/
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/
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
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/#
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
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/
Great tutorial that studies how to recreate the Windows 7 start menu using CSS3 only.
Compatibility: Webkit.
Demo: http://www.jankoatwarpspeed.com/examples/windows7menu/
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/
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/
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/
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/
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/
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/
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/
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/
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/
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/
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
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/
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
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
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
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
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
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
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
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
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
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
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.
