CSS box-shadow property
- Introduction to CSS box-shadow property
- Syntax of the CSS box-shadow property
- Example of the CSS box-shadow property
Introduction to CSS box-shadow Property
Box-shadow property is used to create a shadow of the box. By creating a shadow of any box, you can create attractive effects and bring that box into focus. You can create the shadow of any color and any width in any side of the box.
Whenever box term is used in the context of any HTML element, It means that the border, margin, padding, and content of the element.
Whenever box term is used in the context of any HTML element, It means that the border, margin, padding, and content of the element.
Every HTML element is like a box. The box has some default border, margin, and padding that can be changed. The actual content is inside the box. This is called a CSS box model.
Normally when you look at any HTML element, it does not look like a box. But when a border of that element is defined, then it looks like a box.
To design the CSS box model, you can use borders, backgrounds, margins, and paddings of different colors and shapes. Apart from these, there is another property available in CSS by which you can create a shadow of any box.
Syntax of the CSS box-shadow Property
The general syntax of the CSS box-shadow property is given below.
box-shadow: horizontalShadow verticalShadow blur width color;
As you can see in the above syntax, there are five values of the box-shadow property. These are given below.
- horizontalShadow - By this value, you can define that the shadow will be in the left or right. When this value is in positive then the shadow is shown in right and when it is in negative, the shadow is shown in the left. The more you increase or decrease this value, the more shadow grows in the left and right. You can give this value in pixels.
- verticalShadow - With this value, you can define that the shadow will be in the top or in the bottom. When this value is positive then the shadow is shown on the bottom side and when it is negative, the shadow is displayed on the top side. This value is also given in pixels.
- blur - With this value, you can define how sharp or blurred you want to see the shadow. When you define this value by 0 or negative, the shadow looks sharp like a border.
- width - With this value, you can define what the width of the shadow will be.
- color - With this value, you define the color of the shadow.
Example of the CSS box-shadow Property
Example of CSS box-shadow property has been given below.
<style>
h1
{
box-shadow: 5px 5px 5px 5px red;
width: 40%;
height: auto;
margin: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1> My Blog Helps </h1>
The above example will produce the below output.
<!DOCTYPE html>
<html>
<head>
<title> CSS box-shadow Property Example </title><style>
h1
{
box-shadow: 5px 5px 5px 5px red;
width: 40%;
height: auto;
margin: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1> My Blog Helps </h1>
</body>
</html>
The above example will produce the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.