Web Hosting Blog

109 Awesome CSS3 Tutorials & Resources


Posted in: Your Website

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


•    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



Was this article useful? Let others know

(1/10 based on 285 reviews)


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!



  • Fuzzly
      21 February 2011 at 17:02

    Great collection, why the heck isn't this getting the RT's it deserves????

    Retweeting now

    All the best Fuzzly!
  •   22 February 2011 at 11:48

    Hi Fuzzly,

    Many thanks, much appreciated :)

  • Fuzzly
      28 February 2011 at 15:02

    No worries I see it is getting tweeted, very useful post thanks for taking the time to write it up!



  Live chat