30 Useful and Informative CSS3 Tutorials

CSS3 Tutorials

CSS3 Tutorials – today most browsers support the features that CSS3 offers and it´s a good idea to catch up and explore of the power and beauty of CSS3. Since we just have to add a few lines of code for example shadows and gradients or buttons.

So for JavaScript and Photoshop they slowly loose their importance because it’s now possible to grab the same result with the CSS3 code.

CSS3 Tutorials From 2012

Build a Swish Teaser Page With CSS3

Quickly Build a Swish Teaser Page With CSS3
In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design.


Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Hopefully you’re familiar with the use of the :before and :after pseudo-elements in order to create some interesting effects with CSS. This tutorial will show you how you can create a simple ‘stacked’ look to some images.

Login and Registration Form with HTML5 and CSS3

Login and Registration Form
In this tutorial you are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class:target.

Classic CSS3 Pricing Table

CSS3 Pricing Table
This tutorial will teach you how to create this pricing table with the CSS scaling effects. Improve a look of PSD just by using CSS.

Create an Video Player in jQuery, HTML5 & CSS3

How to Create an Video Player
Create a sleek and functional video player using HTML5 and CSS3.

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, you can toggle states of other elements by checking a checkbox or a radio button. This tutorial will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Thumbnail Proximity Effect with jQuery and CSS3


This tutorial will show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighboring thumbnails proportionally to their distance. You’ll also make a description appear.

Code a Set of Animated App Store Buttons With CSSCSS

In this tutorial you’ll learn how to use some fancy techniques like how to incorporate icon fonts into a design and how to insert objects using pseudo elements.

Create sleek CSS3 ButtonsCSS3 Buttons

In this tutorial you will be making some fancy CSS3 buttons.

Do a Animated Twitter Bird

Animated Twitter Bird

Create an animated bird that animates each time you hover it. This is a very simple CSS3 trick and doesn’t require any advanced knowledge of HTML or CSS.

CSS3 ordered list styles

Here you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.

Texturize web type with CSS

In this tutorial you’ll walk through texturizing type from scratch – beginning with basic HTML and CSS, then creating a semi-transparent texture in Photoshop and implementing it on some headline text within a web page. You’ll finish it off by adding some extra CSS and JavaScript love.

Rotating Words with CSS3 Animations

The idea in this tutorial is to rotate a part of a sentence. You’ll be “exchanging” certain words of that sentence using CSS animations.

All You Need To Know About CSS3 Text Shadow Effects

With CSS3, a whole host of text shadow effects are available for us to play with. In this article, you’ll see some of the effects you can make with relatively little CSS code.

Adding Text Gradients With CSS3

Here you are going to look at some of the new CSS3 features for dealing with text colors.

Add Texture to your Web Fonts

One of the hot CSS3 skills for 2012. Implement a subtle texture over text with just a few lines of code.

Pure CSS3 LavaLamp Menu

You probably have already seen animated menus with the Lava-Lamp effect (based on jQuery plugin). In this tutorial you’ll learn how to repeat the same behaviour using only CSS3.

Create a Content Accordion in Pure CSS3

This tutorial will show you how to create a pure CSS3 content accordion. This will work on all browsers and devices that support the :target selector.

How to Create a CSS3 Dropdown Menu

In this tutorial you will learn how to code a pure CSS3 navigation dropdown menu.

Orman Clark’s CSS3 Vertical Navigation Menu

Recreate Orman Clark’s Vertical Navigation Menu with CSS3 and jQuery while using the minimum amount of images possible.

Image Accordion with CSS3

In this tutorial you will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure you can control the opening of the items/slides with radio buttons.

Basic Accordion with CSS3

Using hidden inputs and labels, you will create a CSS-only accordion that will animate the content areas on opening and closing.

Pure CSS3 Cycling Slideshow

Thanks to CSS3, we can create effects and animations without using JavaScript. We must be careful to avoid abusing CSS3 because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and this article will discuss how to create an infinitely looping slider of images using only CSS3 animation

Interactive menu with CSS3 & jQuery

In this tutorial you’ll learn how to create an interactive menu using CSS3 goodness and jQuery’s power.

Google Play’s minimal tabs with CSS3 & jQuery

In this article you’ll learn how to build some new CSS3 and jQuery tabs inspired by Google Play‘s design.

Create an Image Slider using jQuery and CSS3

In this tutorial you will be creating a slider with “Nivo Slider jQuery Script” and CSS3.

Responsive CSS3 slider

CSS3 Responsive Slider is, as the name implies, a responsive CSS3 slider without Javascript. The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. Not a tutorial but you should check out this awesome slider.

Page Transitions with CSS3

The last few years, we’ve seen a lot of single page websites, most of them using JavaScript for some transition effects. This tutorial is going to teach you how you can have your own, but instead using CSS transitions and the :target property to do all the magic.

CSS3 breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages. In this tutorial you’ll learn how to create your own cool CSS3 breadcrumbs.

Fullscreen Slider with jQuery and CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using  jQuery and CSS animations you can create unique slide transitions


Written by Jonny

Hi! I am the author and publisher of this site. Please feel free to comment the articles and don´t forget to share the articles!

Leave a Reply

Your email address will not be published. Required fields are marked *