The Point When & How to Begin WordPress Development?
May 21, 2014
Sem Seo 4 You: SEO e SEM for Boost Your Business
June 17, 2014

CSS Text Effect Techniques: Text Shadows

CSS3 is a great way to enhance the web without the need of lagging images. In this article, we will be covering the text-shadow property. In the simplest usage, this property gives each letter a shadow effect. The syntax includes selecting a colour, the horizontal length (X-coordinate), the vertical length (Y-coordinate), blur amount (blur radius), and even opacity. It can create one shadow or multiple shadows. In the latter, the shadows will be separated with a comma.

text-shadow: 1px 2px 3px #000000;

First value represents the X-coordinate. In the example, the shadow will move 1px to the right from the text. Second value represents the Y-coordinate. In the example, the shadow will move 2px down from the text. Third value represents the blur radius. In the example, it has a blur amount of 3px. Fourth value represents the colour. In the example, the colour of the shadow is black. In order to create transparency, the colour will need to be in RGBA style instead of HEX so that the last value can represent the opacity amount.

text-shadow: 1px 2px 3px rgba(0,0,0,.1);

3D Text Effect

One of the most popular ways designers makes use of text-shadows is for creating depth in their texts in order to make the letters look 3D. This is great for headers, logo and any other titles with strong prominence.

 

#FFFFFF;
text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9,0 3px 0 #bbb, 0 4px 0 #b9b9b9,
0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px
rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0
10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Would achieve:

3D Text Effect Techniques Text Shadows

Bulging Text Effect

By using several shadows with extensive coordinates, a superhero comic style of texts can be attained. This is a good alternative to the previous 3D effect if you want the shadows to appear sharper. It is also great for websites that are likely to be printed out because it is easier for printers to print solid lines than fuzzy lines.

text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px
30px 0px #00bdbd;

Would achieve:

Bulging Text Effect

Glowing Text Effect

If used on a darker background such as black, the text-shadow can make the text give off a neon glow. This can make the words appear futuristic or dreamy, depending on the colour of choice. The only problem that may arise is that you must make sure there is enough padding or margin around the text so that the glow won’t be covered by something else.

text-shadow:0 0 10px #ffffff,0 0 20px #ffffff,0 0 30px #ffffff,0 0 40px
#32CD32,0 0 70px #32CD32,0 0 80px #32CD32,0 0 100px #32CD32,0 0 170px
#32CD32;

Would achieve:

Glowing Text Effect

Flaming Text Effect

For those feeling bold and want to experiment with different colours, fire can easily be portrayed by letting different colours of the shadows blend with each other to mimic the texture of flames. Most designers use this solely for decorative purposes. The downside of this effect is that there must be enough padding or margin above the text so that the amber can be seen.

color: #000000;text-shadow: 0 0 20px #fefcc9, 10px -10px 30px
#feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

Would achieve:

Flaming Text Effect

The effects that can be accomplished through the power of CSS3 are amazing. Many more effects can be created by doing a bit of experimenting and using your imaginations. For those that are lacking the motivation, one CSS generator that can easily output the effects used in the examples is Generate CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *