Web Hosting Blog

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
•  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

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
•  Create beautiful CSS3 typography
•  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