Text Shadow CSS3 Essential Training

Text Shadow CSS3 Essential Training

CSS, TUTORIALS, WEB

Text Shadow CSS3 Essential Training




The last lesson will explains how to set the box shadows which gives an basic idea about the shadow effects. In this lesson Text Shadow CSS3 Essential Training we are gonna learn how to apply an text shadow effect to the text elements. Here we shows the basic and some advanced tricks on the text shadow effects.
Lets take a look what is the shorthand code in css. It is used to reduce the length of the code which is more helpful to reduce the css file size.
Here we have only one header element and we set an text shadow in the following way. Consider the following example,

And here we have the style for the above elements,

In this Text Shadow CSS3 Essential Training lesson we set the font family stack for the tag h1 which means the first will be the preferred font and the upcoming are the optional fonts or the backup fonts. If the first font is not available or something happened then the second font will be working.




Text Shadow CSS3 Essential Training
It looks like very basic text shadow effect and we can add some more spice to our text using the stack effects to apply on the elements. Consider the below example,

Text Shadow CSS3 Essential Training
In Text Shadow CSS3 Essential Training the above image will shows the power of the text shadow effects. But one of the main purpose of the text shadow effect is make a stroke or an underline to highlight a particular element or text. So we can do that by applying the following effect.

With the normal white background we can’t see the outline of the text, so here we set the background color.
Text Shadow CSS3 Essential Training
The above examples will shows and explains some basics of the text shadow and how to apply them. We hope this lesson will gives you some knowledge about the Text Shadow CSS3 Essential Training lesson series.




Leave a Reply