Adding Shadow Effect to Texts with CSS3 (Text-Shadow)
Thanks to CSS3, we can give shadows to the text (for example, the h1 tag) on our web page.
What we need to do is specify the horizontal and vertical positions of the shadow. Optionally, we can also use shadow color and blur effect.
A shadow has been applied to the h1 tag with the simplest usage below.
h1 {
text-shadow: 2px 2px;
}
Negative values make the shadow pop to the left or top.
h1 {
text-shadow: -2px -2px;
}
Shade color can be specified:
h1 {
text-shadow: 2px 2px red;
}
The amount of dispersion of the shadow can be specified using the blur effect:
h1 {
text-shadow: 2px 2px 5px red;
}
Different looks can be achieved by applying multiple shadows:
h1 {
color: white;
text-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px red;
}
Creating shadows with css, using css shadow, shading text with css, shading boxes, text and box shadow examples tutorials
EXERCISES
|
CSS Text Shadow Tutorials
|
Try It
|
Read 802 times.