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);
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);
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;
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;
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;
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.