Make your text beautiful with CSS3

Styling web content with CSS3 properties can be quite a lot of fun.

This is what you can get with as little as a custom embedded font, text-shadow, CSS rotation and some background gradients:

Quite nice, huh?!

If you want do do this kind of text styling, all you have to do is get acquainted with some of the newer CSS properties. Apart from normal text styling, this mainly does the trick:

Embed a custom font with @font-face

If you want to use some special fonts, you can embed them into your stylesheet via the @font-face rule. The best way to do this: Head over to Font Squirrel and get yourself some nice @font-face kits. You can copy the font files into your website folder and then copy the CSS to your stylesheet.

Bevel your text with text-shadow

Modern browsers unterstand the text-shadow property, so you don’t have to add a browser specific prefix. I defined two kinds of text shadows, a brighter one for the highlight and a darker one for the shadow, like so:

body {
    text-shadow: 3px 3px 0 #9b9073,-1px -1px rgba(255,255,255,0.5);
}

Rotate some portions of the text

As this is not yet an official standard, you’ll have to use the browser specific code to see this effect in Safari and Firefox:

In Firefox:

.rotated {
    -moz-transform: rotate(-5deg);
}

And in Safari:

.rotated {
    -webkit-transform: rotate(-5deg);
}

Note: It seems like Safari only rotates block level elements, so if you use the <span>-Element as CSS hooks, you’ll have to set them to display: block.

Highlight your content with a background gradient

body {
    background: -moz-radial-gradient(center 50%,circle,#700 10%,#500 70%);
}

The code for Safari is a little more complicated:

body {
    background: -webkit-gradient(radial, 50% 50%, 100, 50% 50%, 350, from(#700), to(#500));
}

Here you can see it in action.

Remember, this is was implemented as a demonstration of what’s possible in modern browsers. If you want to make an actual website like this, you would have to take care of less capable browsers and also, the contrast would probably be too low. If you’re not so much into dark colors, I have hidden an easter egg for you in the demo, just change the class of the <body>-Tag to “brown” with Firebug ;-)

If you want to have a look at another cool example of text styling, check out this website.

21.05.2010 ✭ Tags: CSS, Typografie ✭ Keine Kommentare

Neues aus der Schreibwerkstatt