15 Fresh and Powerful CSS3 Tutorials

    written by Nikola Lazarevic

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    Postcard from Paris – CSS3 Keyframes Animations in Use
    Create beautiful of virtual postcard using CSS3 keyframes animations.

    Creative CSS3 Animation Menus

    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

    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

    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

    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

    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?
     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

6 Comments
ADD COMMENT
  • Gonzo the Great says:

    November 13, 2011

    .. lovely collection of great CSS3 tuts, wel done Nikola!
    Cheers & Ciao ..

  • Web Design Company Mumbai says:

    November 14, 2011

    Nice Set of Tutorials.

  • Praveen Gowda I V says:

    November 14, 2011

    Nice collection, looks great

  • Catalin says:

    November 14, 2011

    Hey Nikola, interesting collection. Thanks also for adding one of my articles here! ;)

  • cedx says:

    November 14, 2011

    great collection. thank you

  • business wordpress themes says:

    November 15, 2011

    Thank you for these useful and effective tutorials. This would help us. Keep sharing like this.