109 Awesome CSS3 Tutorials & Resources

Following on from our list of 41 Great HTML5 Tutorials and Resources, 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

Colour

•    Zebra-striping tables with CSS3

•    How to change the default text selection colour

•    CSS3 colours today

Images

•    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

• 

•    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

Animation

•    3D animation using pure CSS3

•    CSS3 animation will rock your world

•    CSS animations

Opacity/Transparency

•    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

•    CSS3 background clip: text

•    CSS3 wrapping

•    CSS3 multicolumns

Forms

•    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

Misc.

•    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