Create Attractive CSS Text Effects | CSS For Bloggers: Part 5 - The Link Medic

learn to create attractive css text effects for your blog

Why do we use CSS for our blog? To make things look cool of course. One way to spruce up your posts is to make your blog post tile and header text stand out a bit. This will make your blog appear to have the finishing touches and fit your particular style. Afterall, that's what CSS is all about.

Today we're going to be checking out some really great effects we can apply to text anywhere using either a custom class selector or editing our header tags directly on the style sheet to make broad changes to all our posts.

STOP if you don't know what a class is or how to edit tag selectors such as the H2 tag..
REVIEW:
How CSS Can Help Improve Your Blog | CSS For Bloggers: Part 1.
Learn About Class and ID Selectors | CSS For Bloggers: Part 2.

To Span or Not to Span

First we want to decide if we want to change all of our header text or just the text we want.

The text that says "To Span or Not to Span" is my H2 tag. It's the header I use in the middle of my posts. So with the beauty of CSS, anytime I would like to change its style I change the H2 tag selector.

The CSS:

h2 {
color:#333333;
font-family: 'Droid Sans', arial, serif;
font-size:25px;
letter-spacing: -2px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.4em;
margin:1.5em 0 0.75em;
text-transform:uppercase;
}

The HTML:

<h2>To Span or Not to Span</h2>

Alternatively, sometimes I like to get a bit more stylish. I use my custom header with shadow.

And It Looks Like This

The CSS:

.headtext
{font-family: "Myriad Pro"; "Helvetica Neue", Helvetica;
color: #333333;
font-style: bold;
font-size: 40px;
text-shadow: 0px 3px 0px #cccccc;
}

The HTML:

<span class="headtext">And It Looks Like This And It's Pretty Awesome</span>

You can of course change the font to fit your template and adjust the font-size to make it look right.

Now that you see how that works let's get into some cool effects snippets.

Here is a more natural looking shadow, can also be used for glow.

.glowshadow
{font-size: 19px;
color: #333333;
text-shadow: 0px 2px 3px #555555; }

The good news here is that text-shadow has been around for a very long time now and most up-to-date browsers support it.

Here is a true glow effect.

.glow
{font-size: 19px;
color: #333333;
text-shadow: 1px 1px 6px #555555;
}

Maybe you don't want all this shadowy business, what I like to do is play around with letter-spacing. Some fonts just look better smushed together. Use this property to experiment with different looks to fonts.

Big Bold and Uppercase

.bigbold
{font-family: Arial;
font-size: 35px;
letter-spacing: -3px;
font-weight:bold;
text-transform:uppercase;
}

Font and Text Properties Overview

Knowing the properties and associated values is the name of the game in CSS. Here is a list of the text properties we covered in this post and the values that go with them. You can use these to create all kinds of styles to fit your blog's needs.