Today I will tell you the right way like How to Create Box Shadow Property in CSS. To complete read this article and follow all given instructions.
What is the meaning of the Box shadow property?
The CSS property box-shadow creates shadow effects around an element's frame. You can use commas to separate multiple effects.
The X and Y offsets relative to the element, as well as the blur and spread radius and color, define a box-shadow.
BOX-SHADOW PROPERTY TYPES- HERE YOU ARE THE CODE
1.Top-left
2.Bottom-right
3.Bottom-right-spread
4.Outer-spread
5.Inset
SOURCE CODE INPUT<>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: black;
}
div{
width: 100px;
height: 100px;
border: 1px solid brown;
margin: 20px auto;
padding: 5px;
}
/*Extra style for Box*/
#top-left{
box-shadow: -5px -5px gray;
/*Frist px is for LEFT
Second px is for TOP
Last is Color */
}
#bottom-right{
box-shadow: 5px 5px 5px gray;
/*Frist px is for RIGHT
Second px is for BOTTOM
Third px is for Blur
Last is Color */
}
#bottom-right-spread{
box-shadow: 5px 5px 5px 5px gray;
/*Frist px is for RIGHT
Second px is for BOTTOM
Third px is for Blur
Fourth px is for Spread
Last is Color */
}
#outer-spread{
box-shadow: 0px 0px 20px rgb(241, 241, 0);
/*TOP-RIGHT & BOTTOM-LEFT 0PX
Third px for Spread For All Side*/
}
#inset{
box-shadow:inset 0px 0px 10px yellow;
/*
INSET Mean INSIDE THE BOX
*/
}
</style>
</head>
<body>
<div id="top-left">top-left</div>
<div id="bottom-right">bottom-right</div>
<div id="bottom-right-spread">bottom-right-spread</div>
<div id="outer-spread">outer-spread</div>
<div id="inset">inse</div>
</body>
</html>
FOR SAMPLE IMAGES
Posts
0 Comments