WEBEXPEDITION18 Never Stop The Exploring

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.

How To Create A Beautiful Icon With CSS3

We’ll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

CSS3 Image Styles

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.

Blur Menu With CSS3 Transitions

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.

Practical CSS3 Tables With Rounded Corners

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.

Quick Tip: Create Pure CSS3 Ticket-Like Tags

During this tutorial we’re going to use CSS3 to create ticket-like tags, without relying on any images.

Original Hover Effects With CSS3

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.

Create Spinning Rays With CSS3: Revisited

See how easy is to create a spinning rays animation with a bit of CSS.

Animated Buttons With CSS3

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.

Having Fun With CSS3: Spinning Newspapers

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.

Postcard From Paris – CSS3 Keyframes Animations In Use

Create beautiful of virtual postcard using CSS3 keyframes animations.

Creative CSS3 Animation Menus

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.

Create A Swish CSS3 Folded Ribbon In Five Minutes

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.

Create A Unique Contact Form With CSS3 Transitions

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.

Type Study: Sizing The Legible Letter

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.

CSS3 Bling In The Real World

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?