The shadow behind a box gives an amazing 3-D effect. We can apply this 3-D effect by box shadow property.
The Syntax is :
box-shadow : [horizontal-positioning-value] [vertical-positioning-value] [blur-radius] [optional disperse-radius ] [color];
1. horizontal-positioning-value: (mandatory) tells the horizontal positioning. the positive values gives the right shift and negative value gives the left shift to the shadow.
2. vertical-positioning-value: (mandatory)tells the horizontal positioning. the positive values gives the top shift and negative value gives the left shift to the shadow.
3. blur-radius: the shadow will become more blur with increasing blur-radius pixels. blur-radius 0px will give a sharp shadow.
4. disperse-radius(optional): the default value of this field is 0px. the positive value will increase the size of shadow.
5. color: it is the color of shadow and takes name, hexdecimal code , rgba() as its value.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height:200px;
background-color: pink;
box-shadow: 10px 10px 5px #75D1FF;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
0 Comment(s)