CSS Box Shadow Examples
How to create box shadow with pure CSS?
Example of the Box shadow:
What is the box-shadow CSS effect?
Box-shadow we use in any element and box will be shown with a shadow.
CSS box-shadow have six properties: Horizontal, vertical, blur, spread, color & inset
Shorthand property of the CSS Box-shadow: Horizontal, vertical, blur, spread, color & inset
Box-shadow: Horizontal, vertical, blur & color.
Box-shadow value also allows negative value.
Exampale: Box-shadow : 5px 2px 10px red
What is the default value of the box shadow: none;
also similar as text-shadow.
Example of the Box shadow:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.anything1 {
max-width: 500px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 5px 5px;
}
.anything2 {
max-width: 500px;
padding: 10px;
margin: 30px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 5px 5px 10px #0bf;
}
.anything3 {
max-width: 500px;
padding: 10px;
margin: 40px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 10px 0px 10px #0bf;
}
.anything4 {
max-width: 500px;
padding: 10px;
margin: 40px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px #ccc inset;
}
.anything5 {
max-width: 500px;
padding: 10px;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 5px 10px 2px #0bf, -2px -5px 10px 2px #0b6;
}
</style>
</head>
<body>
<div class="anything1">
<p>CSS Box Shadow</p>
</div>
<div class="anything2">
<p>CSS Box Shadow</p>
</div>
<div class="anything3">
<p>CSS Box Shadow</p>
</div>
<div class="anything4">
<p>CSS Box Shadow</p>
</div>
<div class="anything5">
CSS Box Shadow
</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.