CSS3 Tutorial and Resources

Posted By: Avazio on Aug 17, 2011 in Design

We’ve put together a list of over a hundred great CSS3 tutorials, tools and resources for you to use. Enjoy!

Browser Compatibility

•  Can I Use?
•  HTML5 and CSS3 Support

Cheat Sheets & Introductions

•  CSS3 Help Sheet (PDF) [JPG version is here]
•  CSS3 Cheat Sheet
•  Introduction to CSS3
•  Get Started with CSS3
•  5 techniques to acquaint you with CSS3
•  11 classic CSS techniques made simple with CSS3
•  Impossible things now possible with CSS3
•  Getting to work with CSS3 power tools

Navigation, Menus & Layouts

•  CSS3 Dropdown Menu
•  Minimalistic Navigation Menu
•  How to create a vertical sliding panel using jQuery and CSS3
•  Horizontal Dropdown Menu using CSS3
•  How to create a customizable dock with CSS3
•  Halftone navigation menu using jQuery and CSS3
•  Create an Apple-style menu purely in CSS3
•  Slide down box menu
•  Make an elastic thumbnail menu
•  Awesome cufonized fly-out menu
•  How to build a kick butt CSS3 mega drop-down menu
•  Sweet tabbed navigation using CSS3
•  Build multi-level multi-column multi-menus with pure CSS
•  Animated navigation menu with CSS3
•  Sweet ajax tabs using jQuery and CSS
•  Liquid faux columns
•  CSS3 template layout module


•  Zebra-striping tables with CSS3
•  How to change the default text selection colour
•  CSS3 colours today


•  CSS3 border images
•  CSS3 background images
•  Flash-style image effect using CSS3
•  Image hover effects using CSS3
•  Creating a Polaroid photo viewer with CSS3 and jQuery
•  Smooth fading image captions with pure CSS3
•  Beautiful photo stack gallery with jQuery and CSS3
•  Fancy image hover using CSS3
•  Slick CSS3 animated image caption
•  Turn your images into Polaroids
•  Going nuts with CSS transitions
•  3 easy and fast CSS techniques for faux image cropping

Buttons & Icons

•  Sexy buttons in just CSS3
•  Pretty CSS3 buttons
•  CSS3 animated bubble buttons
•  CSS buttons
•  Pure CSS social media icons
•  Build awesome, practical CSS3 buttons
•  Super awesome buttons with CSS3 and RGBA
•  CSS3 floating social bookmark tab
•  Display social icons in a beautiful way using CSS3


•  3D animation using pure CSS3
•  CSS3 animation will rock your world
•  CSS animations


•  Element transparency in CSS
•  A mock-up interface using transparency
•  CSS3 opacity

Shadow & Gradient Effects

•  Getting clever with CSS3 shadows
•  CSS gradient text effect
•  CSS boxshadow experiments
•  Understanding CSS3 gradients
•  Drop-shadow in images
•  Text shadow
•  CSS text shadows and background sizing

Typography / Text Effects

•  CSS text rotation
•  The little-known font size adjust CSS3 property
•  CSS3 Text
•  Text embossing technique with CSS
•  Create a letterpress effect with CSS text shadow
•  Embed font-face
•  Create beautiful CSS3 typography
•  CSS3 background clip: text
•  CSS3 wrapping
•  CSS3 multicolumns


•  Inline form labels
•  Design a prettier web form with CSS3
•  Styling forms with attribute selectors

Boxes & Grids

•  Create a beautiful-looking custom dialog box with jQuery and CSS3
•  CSS3 infobox with no presentational markup
•  How to create depth and nice 3D ribbons only using CSS3
•  Fun with CSS3 and Mootools
•  Create a jQuery content slider using pure CSS
•  Rounded corner boxes the CSS3 way
•  Create an animated price grid using CSS3

Properties, Elements & Classes

•  Using CSS3 transitions to create rich effects
•  How nth child works
•  The CSS3 target pseudo class
•  Stay on target

Fun Stuff

•  Create a sticky note effect in 5 easy steps with CSS3 and HTML5
•  Pure CSS speech bubbles (enhanced with CSS3)
•  Sticky notes with CSS3
•  CSS3 bokeh effect (with some jQuery)
•  Use CSS3 to create a dynamic stack of index cards
•  Let’s create paper with CSS
•  Simulate realism with CSS3
•  Create a vibrant digital poster design with CSS3


•  Take advantage of CSS3 to achieve subtle design
•  Use CSS3 now
•  CSS3 slide-up boxes
•  Related posts slide-out boxes
•  Wicked animated CSS3 3D bar chart
•  7 JavaScript effect alternatives using CSS3 (for webkit browsers)
•  4 uber cool CSS techniques for links
•  CSS3 flexible UI – avoid recutting UI graphics for mobile
•  Flexible mobile first layouts with CSS3
•  Creating fancy bullet points with pure CSS3
•  Get the best out of CSS3
•  CSS3 – to infinity and beyond
•  Push your web design into the future with CSS3


Here at Avazio we aim to give the best and cheapest web hosting for students. Once students ourself, we know that money is precious; that's why we provide an affordable and unrestricted service.

Paypal Verified