The Box-shadow property in HTML attach more shadow in the elements, box or image.
Below are the attributed for the Box-shadow property :
h-offset
v-offset
blur
spread
color
inset
Below are two examples. One Example is with attributes(h-offset, v-offset, blur , color and spread)
and the second example is with attribute (inset).
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 7px;
box-shadow: 5px 5px ;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 4px 10px;
}
#example3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 10px 10px gray ;
}
#example4 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 4px 10px 10px blue;
}
</style>
</head>
<body>
<h2>Simple Shadow of the Box</h2>
<div id="example1">
<p>The Tech Platform</p>
</div><br>
<h2>Shadow with Blur </h2>
<div id="example2">
<p>The Tech Platform</p>
</div><br>
<h2>Spread the Blur </h2>
<div id="example3">
<p>The Tech Platform</p>
</div><br>
<h2>When we add color </h2>
<div id="example4">
<p>The Tech Platform</p>
</div>
</body>
</html>Output:
Inset Property:
The Inset property in HTML changes the shadow from the outer shadow to inner shadow. See the example below to understand this property:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px inset;
}
#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 10px green inset;
}
</style>
</head>
<body>
<h2>Inset Property</h2>
<div id="example1">
<p>Add shadow inside the frame or box</p>
</div><br>
<h2>Inset Property with blur</h2>
<div id="example2">
<p>Add blurred shadow inside the box.</p>
</div>
</body>
</html>Output:
Sofia Sondh
The Tech Platform
Commentaires