This post is part of our Ampersand series, a set of blog posts focused on fonts. We’re sponsoring and attending Ampersand 2012, a typography conference based in Brighton.
Between CSS3 and the sheer number of fonts now available for use on the web, text-based titles are starting to replace images more and more. As well as improving your page load speed and being better for search engine optimisation, text titles are extremely quick and easy to edit – particularly handy when you’re dealing with clients who change their mind frequently!
With that in mind, we’ve put together a list of tutorials that will help you on your way to stunning titles without so much as a graphics program or a .png in sight.
Using CSS Text Shadow to Create Cool Text Effects
Line 25 has a great article on CSS3 text effects for a series of striking results.
3D Text
This is a pretty popular technique, and it’s much easier to do with CSS than an image. Check out the tutorial at markdotto.com.
CSS Text Rotation
This CSS text rotation tutorial is a space-saving and attractive way to display dates on your blog.
CSS Transforms Font Face Experiment
Completely created using CSS, this experiment is well worth a look.
Create Beautiful CSS3 Typography
Transform your website by adopting this attractive yet practical CSS3 typography.
Text Blur
Blurring text can create an extreme but eye catching look for your website. Check out Simurai’s post to find out more.
CSS Gradient Text Effect
There are quite a few text effects in this article, but this one is the most impressive:
CSS3 Text Shadow Effects
Great easy to follow tutorial from Crazy Egg.
Text Shadow
Handy CSS3 text shadow generator – perfect if you don’t want to spend a lot of time tweaking and checking code.
CSS3 Background Clip Font Face
Another excellent resource from Trent Walton.
Little Known Font Size Adjustment CSS3 Property
Make sure your text is presented properly with this uncommon tip.
Create a Vibrant Digital Poster Design with CSS3
This CSS3 poster tutorial helps you create a beautiful design in minutes.
Introduction to CSS 3: Text Effects
More excellent CSS3 text effects, this time from designshack.net.
Full CSS3 Text Shadows – Even In IE
This tutorial helps you create cross-browser compatible shadows for your text.
Fun with CSS Text Shadow
Trent Walton’s fun with CSS text shadow experiment shows the power of CSS3.
Text Embossing Effect
Excellent text embossing effect from jankoatwarpspeed.com.
CSS3 Text Shadows
Several CSS text shadow combinations that are easy to use.
Neon Text Effect With jQuery
It’s not pure CSS but it’s a striking effect all the same – Neon Text Effect with jQuery.
Want more CSS3 effects? Check out 109 Awesome CSS3 Tutorials and Resources.
Comments
Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!