CSS: advanced text effects

In this post I'm going to show you how to create advanced text effects using CSS. We'll use text shadows, rotations and generated content to generate a site header that rotates on hover. First of all, these effects are provided using only the :hover pseudo-class for the sake of simplicity, but you can add a finer effect if you use CSS transitions. The first thing we need to do is to set up our demo environment. We can draw a basic HTML structure containing the following elements:

<div id="branding">
 <h1>Site Name</h1>
</div>

Now the basic, global styles:

body {
 margin: 0;
 padding: 0;
 background: #fff;
 color: #333;
}

#branding {
 height: 100%;
 padding: 0 1em;
 background: #1448a8;
 color: #fff;
}

height: 100% is useful only for backward compatibility with IE 7 and lower. Most of the features we're going to use are not supported in IE up to version 7 (including), but we still need not to break our layout. Then we can style our heading:

#branding h1 {
 margin: 0;
 font: normal 5em Georgia, serif;
 text-shadow: 3px 4px 4px #5768f6;
 position: relative;
 cursor: pointer;
 top: 10px;
 padding-left: 10px;
}

#branding h1:before {
 content: '\1D25';
 padding-right: 10px;
 font-weight: bold;
 color: #3768f6;
 font-size: 100px;
 position: relative;
 top: -5px;
}

We've added a shadow to the text using the text-shadow property. Then we've inserted a special character just before the heading's text using generated content to create the effect of a logo. Finally, we need to add our transformations on hover:

#branding h1:hover {
 -moz-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 transform: rotate(-5deg);
 background: #1448a8;
 -moz-border-radius: 0 0 0 10px;
 border-radius: 0 0 0 10px;
    font-weight: bold;
    text-align: center;
}

As you can see, the heading will be rotated by minus 5 degrees counterclockwise, its weight will turn into bold and its text alignment will be centered. You can see a demo below.

Demo

Live demo