The Designer’s Guide to CSS3
Creating beautiful text online has long frustrated designers. But with some new features in CSS3, we can do things to text with code that previously had to be done with images. Our text will work nicely with content management systems and will be dynamic. Let’s look at some CSS3 text styles that designers will love.
Easy-to-use layer styles in Photoshop made text shadows ubiquitous. But historically the style could only be used online by generating images for the text that needed shadows.
Text shadows are highly prone to abuse. So, while I encourage you to understand it and use it, please exercise some restraint. Here are two demonstrations of what can be accomplished with CSS3:
You can do basic shadows that mimic the default layer styles in Photoshop, but you can do so much more than that. The samples you see above were created using multiple text shadows on the same element. Such an approach is difficult to plan for without the code in mind. Check out the resources for text shadows listed below to fiddle with the output and see ways you can use this.
You can also use text shadows in a way that doesn’t look like shadows at all. In the image below, the text looks pressed or inset. Subtle effects like this can be a nice alternative to the radical demonstrations above.
CSS3 text shadow resources
- An excellent tool for playing with CSS3 based shadows
- An impressive display of CSS based 3D text
- Some great code samples for various text shadow effects
Custom web fonts with @font-face
As fun as drop shadows can be, by far CSS3’s most popular enhancement to text is the ability to leverage custom fonts. Even better, this is one of the CSS3 elements that have some of the broadest browser support. Amazingly, even Internet Explorer supports it—all the way back to version 4!
This advancement makes generating images for headline or display text a thing of the past (though it was already a very dated approach). Custom fonts can be used on dynamic content coming out of systems like WordPress, even.
I intentionally selected a font that doesn’t even remotely resemble a standard web-safe font to prove a point. There are countless beautiful fonts available to use, some commercially, others for free. Check out the resources below for some great options for custom type.
Web font resources
- Free CSS based fonts via Font Squirrel
- Free fonts via Google
- Commercial fonts via Typotheque
- Commercial fonts via Typekit
- Commercial fonts via Fontdeck
While CSS3 doesn’t have gradient tags specific to text, gradients can be applied to text, which can be a great way to add subtle or extremely bold styles to text. Be sure to check out the articles on backgrounds and gradients to get an idea of what’s possible.
- Some incredible examples of what can be done with CSS3 based text effects
- An awesome jQuery plugin to do radical things with type online
- A handy tool for playing with the basic CSS (not CSS3) text styling options