Previous | Next
tesscodes: (Default)
tesscodes: (Default)

How to Create Text Effects

tesscodes: (Default)
FANCY
Text Effects
Cheat Sheet


Gradients, & image fills, & outlines—Oh my!

Extra slick text effects without relying on image editing programs are easier than you might think! I've put together some demos for effects you might have wished you could do without having to create images, what to do to make them, and how they work. If you have an other types of text effects not shown here that you're curious about, ask away in the comments! If they can be done with CSS I'll add them to the cheat sheet for you guys!

Where is this cheat sheet? Follow the link below for the full demo and tutorial! Since this revolves all around fonts I thought I'd really be dropping the ball here if I didn't import as many Google fonts as I could to showcase what I'm showing you how to do on this one, so I figured an HTML page of its own would be best in this case.

Is this tutorial only for layouts? NOPE. All demos available can be used to style your text in entries too. I have more info at the end of the tutorial page!

Are all of these styles completely cross-browser compatible? Most of them don't work in IE as far as I know, but they're all supported in Chrome/Firefox/Opera/Safari, so I'm fine with that level of support haha.


To the Cheat Sheet!