CSS3 TEXT EFFECTS

The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, Almost all of the major browsers support the many CSS3 features. A big change in CSS3 is Web Typography. Text styling and impressive effects can be achieved without the use of javascript or images!

Below is a collection of some of the best CSS3 Text Effects!
LETTERPRESS EFFECT

Add the following CSS properties to your selector:

.text {
color: #222;
text-shadow: 0px 2px 3px #555;
}

So your markup should look like this…

<span class="text">Text goes here</span>

OUTLINE AND TRANSPARENT EFFECT
Outlined text

.stroke {
color: #c00; /*- text color -*/
-webkit-text-stroke: 1px #000; /*- stroke color and weight -*/
}

…your markup should look like this:

<span class="stroke">Text goes here</span>

Outline and Transparent fill text

.stroke-transparent {
-webkit-text-stroke: 1px #000; /*- stroke color and weight -*/
-webkit-text-fill-color: transparent; /*- fill color (transparent) -*/
}

…your markup should look like this:

<span class="stroke-transparent">Text goes here</span>

GLOWING EFFECT

.glow {
color:#FFFFFF ;
text-shadow:0 0 20px yellow ;
}

/*-- Deeper glowing text --*/
.deeperGlow {
color:white;
text-shadow:0 0 30px yellow , 0 0 70px yellow ;
}

…your markup should look like this

<span class="glow">Text goes here</span>
<span class="deeperGlow">Text goes here</span>

PHOTOSHOP EMBOSS

.Emboss {
background:#ccc ;
color:#ccc;
text-shadow: -1px -1px white, 1px 1px #333;
}

…your markup should look like this:

<span class="Emboss">Text goes here</span>

BLURY TEXT

.blurytext {
color: transparent;
text-shadow: #fff 0 0 10px;
}

…your markup should look like this:

<span class="blurytext">Text goes here</span>

Remember, these don’t work just yet in some browsers! *cough* IE *cough* So use with some caution.

Give some of these a go and let us know how you get on and if you have used any of the above techniques in any of your projects!