Please do check browser compatibility when implementing any of these techniques.
CSS3 Image Galleries, Slideshows and Image Effects
In this tutorial you’ll be shown how to create some neat sliding image panels. The idea is to use background images for the panels and animate them when clicking on a label.
You’ll create a CSS-only fullscreen background image slideshow with this tutorial. You’ll learn how to create different image transitions and also make an animated title appear.
With this tut you will be shown how to create a lightbox effect using only CSS. You will have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, you will learn how to make the larger image appear in a sleek and fancy way.
In this tutorial you will be shown how much you can do with background-image. You’ll be shown how to use box-shadow, border-radius and transition to create various image styles.
CSS3 Menus, Navigation & Buttons
In this short tutorial, you will be using the power of CSS3 effects and transitions, to build an animated menu, using some neat features such as the :target pseudo selector and :after elements.
The idea of this tutorial is to create some animated link elements with different styles, hover effects and active states.
With a simple composition of elements, an icon, a main title and a secondary title, you will learn how to create an animated menu on hover using only CSS transitions and animations.
In this tutorial you will be shown how to create a beautiful hover effect for an image-based navigation using CSS3.
Here you will be shown how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive.
CSS3 Animation Tutorials
In this tutorial you will learn how to create some amazing animated web banners with CSS3.
CSS3 Tooltips & Alerts
In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes”.
With the CSS property “background-clip: text”, you can add a background image to a text element. With this tutorial you will experiment with it and create some fun examples by adding CSS3 transitions.
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 explore those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
The power of CSS3 is enormous and in this tutorial you will be shown how to exploit it in a very creative way, by creating some thumbnail hover effects with CSS3 transitions.
CSS3 Sliders and Charts
In this tutorial you will learn how to create the awesome CSS3 Progress Bars you can see above.
CSS3 Layouts & Pages
In this tutorial you will be shown how to go wild using CSS3 animations and create an amazing splash and coming soon page.
In this tutorial you will see some simple examples and ways to create slopy, skewed elements with CSS only.
In this tutorial, you will be creating a simple about page that is powered by PHP, HTML5 and CSS3.
Miscellaneous CSS3 Tutorials
In this tutorial you’ll create a document icon with pure CSS3.
How To Create Depth And Nice 3D Ribbons Only Using CSS3
In this tutorial you will learn how to create beautiful 3D ribbons only using CSS3.
How To Create Depth And Nice 3D Ribbons Only Using CSS3 →
In this tutorial you will learn how to create a beautiful Bokeh effect using CSS3 Gradients.