Web typography with CSS3

Posted on December 31, 2010

In this post I'm going to show you how to improve the overall visual effect of a sample h1 element by using some advanced CSS3 properties, namely border-radius, box-shadow, text-shadow and transform. The default appearence of such an element is shown below.

Now let's augment its styles:

h1 {
        
        font: normal 3.5em Impact, sans-serif;
        letter-spacing: 0.2em;
        color: #fff;
        text-transform: uppercase;
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        text-shadow: 3px 3px 3px #999;
        -moz-box-shadow: 3px 3px 3px #999;
        -webkit-box-shadow: 3px 3px 3px #999;
        box-shadow: 3px 3px 3px #999;
        background: #990;
        -moz-border-radius: 6px;
        border-radius: 6px;
        padding: 8px;
}

And this is the result:

As you can see, the most impressive effect is the rotation performed on the block counterclockwise.

4 thoughts on “Web typography with CSS3”

  1. I notice that for the rotation, you've used vendor-prefixed styles, but there's no "generic" style for when the vendor prefixes cease to be necessary. What would the eventual generic style for rotation be?

Leave a Reply

Note: Only a member of this blog may post a comment.