Notice the box above has a darker green shadow on the side and bottom. That is done using the CSS box-shadow property. Before we look at the code to make this box, let's look at the genral box-shadow syntax.
.shadow {
box-shadow: 30px 25px 5px 10px #443700;
}
➼ shadow - This is our CSS class name.
➼ h-shadow - 30px - The horizontal shadow position.
➼ v-shadow - 25px - The vertical shadow position.
➼ blur - 5px - The size of the blur effect.
➼ spread - 10px - The size of the shadow.
➼ color - #443700 - The color of the shadow
Some of the values are required and some are not.
✶ h-shadow - Required ✔
✶ v-shadow - Required ✔
✶ blur - optional
✶ spread - optional
✶ color - option (black is default)
Many of the values can be negative or possitive.
✶ h-shadow - Negative or Possitive ✔
✶ v-shadow - Negative or Possitive ✔
✶ blur - Possitive Only
✶ spread - Negative or Possitive ✔
✶ color - N/A
Now let's make the box you see below!
.greenBox {
background-color: #A0FF75;
width: 50%;
box-shadow: 8px 8px 2.5px #1B5C1C;
padding: 50px;
}
➼ greenBox - Class Name
➼ background-color - #A0FF75 - (Green Color)
➼ width - 50% of its Container
➼ boxshadow:
➼ 8px - H-shadow
➼ 8px - V-shadow
➼ 2.5 - Blur
➼ #1B5C1C - Shadow Color
➼ padding - 50px - (on each side)
<div class = "greenBox">
This is a div with box-shadowing!
</div>
You can use inset to create an inside shadow effect. The word inset is place at the end of the box shadow code. (See example CSS below)
.insetBox {
background-color: #FF3926;
box-shadow: 8px 8px 2.5px #57130D inset;
padding: 50px;
width: 50%;
}
Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.