How to make your text look awesome using CSS3 | Heart Internet Blog – Focusing on all aspects of the web

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!

Got a question? Explore our Support Database. Start a live chat*.
Or log in to raise a ticket for support.
*Please note: you will need to accept cookies to see and use our live chat service