Css3 has added a new feature shadow to give shadow of elements. It supports two types of shadow:
Text Shadow:
You can use text shadow property to give text shadow effect. text-shadow property is used to give shadow effects to text elements. following are the examples:
h1{
text-shadow: 2px 2px;
}
there are horizontal shadow and vertical shadow mentioned above.
h1 {
text-shadow: 2px 2px 5px red;
}
You can add blur effect and color to text shadow in the third and fourth parameter. You can also add more than one shadow effect to a text element by using comma between two shadows like this:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
You can see the demo of text shadow here.
Box Shadow:
box-shadow property is used to give shadow effect to box elements like a container with a background or border.
div {
box-shadow: 10px 10px;
}
It is same as text shadow parameter: horizontal and vertical.
div {
box-shadow: 10px 10px 5px grey;
}
You can add color and blur effect to box shadow.
You can see the demo of box shadow here.
0 Comment(s)