15 Fresh and Powerful CSS3 Tutorials
written by Nikola Lazarevic
- November 13, 2011
- tags: css tutorials
CSS3 is here, it’s fun, and allows us to evolve the look of the web as we go. Features like gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of more fun. In this post we’ve collected some new and brilliant tutorials that will help you in mastering your CSS3 skills.
We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. This tutorial will show you how to use box-shadow, border-radius and transition to create various image styles.
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. In this tutorial you will learn how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements.
Designing a table is a challenge. It’s (mostly) about how easy is your table to read. If your table isn’t easy to scan, usually users get annoyed as they lose focus when trying to find the right column and row. Having said that, today we’re going to create beautiful and practical tables styled using CSS3.
During this tutorial we’re going to use CSS3 to create ticket-like tags, without relying on any images.
We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.
See how easy is to create a spinning rays animation with a bit of CSS.
Still hyped by the possibilities of CSS3, we want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
Imagine a cop drama taking place in the 1930s. What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities.
Create beautiful of virtual postcard using CSS3 keyframes animations.
The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We’ll be exploring some different effects for the elements.
Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes. Let’s see how.
Inspired by the contact form on Clear Span Media website PeHaa will show us how to recreate an effect of a letter sliding out from an envelope on mouse hover.
Sizing text isn’t the most glamorous topic. Let’s dive into a few popular methods, discuss them with a bit of equanimity, and wrap up this little essay with a better understanding of our options for font-size.
Putting our fun experiments aside, what CSS3 stuff can we really start using in a wide variety of production sites, right now, without having to wait 10 years until IE6 finally dies of old age and we have to start learning CSS4?