Hello, guys welcome to Code With Random blog, today we learn Box shadow CSS. We learn topics like Top Box Shadow, Bottom Box Shadow, Left Box Shadow, Right Box Shadow, Top Left Box Shadow, Bottom Right Box Shadow, and many more things about CSS Box Shadow.
Q. What is CSS Box Shadow?
CSS box-shadow is a Shadow design that comes from CSS. We have box Shadow for all sides or top box Shadow, bottom box Shadow, right box Shadow, left box Shadow. In this blog post, you easily learn how to create the box Shadow for any HTML element.
Top Box Shadow
If we want to give shadow to the top of the element so we just need to use box-shadow to create top shadow so we learn how to create it.
First, we write HTML for it... and we use this HTML code for every example
<div class="box">
<h1>Example of Box Shadow</h1>
</div>
CSS Part:
* {
margin: 0;
padding: 0;
}
body {
background-color: burlywood;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: 0px -14px 4px rgba(0, 0, 0, 0.5),
-3px -3px 4px rgba(0, 0, 0, 0.5);
}
Output...
Bottom Box Shadow
We don't need to change many properties. we just need to change the code in box class's box-shadow so let's check what is it?
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: 0px 15px 0px rgba(0, 0, 0, 0.5);
}
Output...
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: -13px 0px 0px rgb(0 0 0 / 50%);
}
Output...
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: 15px 0px 0px rgba(0, 0, 0, 0.5);
}
Output...
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: -16px -15px 0px rgba(0, 0, 0, 0.5);
}
Output...Top Left Box Shadow
Bottom Right Box Shadow
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2rem;
margin: 2rem;
background-color: #ffff;
box-shadow: 16px 15px 0px rgba(0, 0, 0, 0.5);
}
Post a Comment