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
Cheat Sheets & Introductions
• CSS3 Help Sheet (PDF) [JPG version is here]
• 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
• 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
Colour
• Zebra-striping tables with CSS3
• How to change the default text selection colour
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
• CSS3 animated bubble 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
Opacity/Transparency
• A mock-up interface using transparency
Shadow & Gradient Effects
• Getting clever with CSS3 shadows
• CSS gradient text effect
• Understanding CSS3 gradients
• CSS text shadows and background sizing
Typography / Text Effects
• The little-known font size adjust CSS3 property
• Text embossing technique with CSS
• Create a letterpress effect with CSS text shadow
• Embed font-face
Forms
• 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
• 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
• The CSS3 target pseudo class
Fun Stuff
• Create a sticky note effect in 5 easy steps with CSS3 and HTML5
• Pure CSS speech bubbles (enhanced with CSS3)
• CSS3 bokeh effect (with some jQuery)
• Use CSS3 to create a dynamic stack of index cards
• Create a vibrant digital poster design with CSS3
Misc.
• Take advantage of CSS3 to achieve subtle design
• 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
• CSS3 – to infinity and beyond
• Push your web design into the future with CSS3















Comments
Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!