Box shadow effect in css

The box-shadow effect in CSS property adds shadow effects around an element’s frame. You can add one or more shadows to an element. But, if you want to add more than one shadow to your element then add a comma-separated list of shadow effects.

CSS box shadow in CSS Syntax:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Property Values:

value	Description
none	Default value. No shadow is displayed
h-offset	Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread	Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color	Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

Here are some examples for box-shadow.

Example For adding shadow effect to the element:

----HTML----
<div class="box"></div> 
----CSS----
body{
  background-color:#eee;
}
.box{
  position: absolute;
  top: 30%;
  left:39%;
  width:200px;
  height:200px;
  border:3px solid;
  border-color:#1ab;
  box-shadow:5px 10px 8px 10px #aaa;
}

Output

The spread radius of the shadow:

<div class=""box></div>
----CSS----
body{
  background-color: #eee;
}
.box{
  position: absolute;
  top: 29%;
  left: 50%;
  width:200px;
  height:200px;
    border: 3px solid;
  border-color:#1ab;
  box-shadow:5px 10px 10px 10px #888888;
}

Output:

Example for adding multiple shadow

<div class="box"></div>
<div class="box1"></div>
----CSS----
body{
  background-color: #eee;
}
.box{
  position: absolute;
  top: 29%;
  left: 50%;
  width:200px;
  height:200px;
  border-color: #aaa;
  background-color:#0998ba;
  box-shadow:5px 5px #123, 10px 10px #aac, 15px 15px #01b;
}
.box1{
  position: absolute;
  top: 29%;
  left: 50%;
  width:200px;
  height:200px;
  border-color: #aaa;
  background-color:#0998ba;
  box-shadow:2px 1px red, 5px 4px yellow, 8px 7px green;
}

Output:

Animation with Box-Shadow:

<div class="box"></div>
body{
  background: black;
}
.box{
  position: absolute;
  top: 50%;
  left:50%;
  width:80px;
  height:80px;
  border-radius: 90%;
  cursor: pointer;
  animation: mymove 2s infinite linear;
}
@keyframes mymove{
  0%{
   box-shadow: 0 0 0 0px rgba(62,45,202, 0.2);
    }
  20%{
   box-shadow: 0 0 0 20px rgba(62,45,202, 0.2);
    }
  40%{
   box-shadow: 0 0 0 20px rgba(62,45, 202, 0.2),
               0 0 0 40px rgba(62,45, 202, 0.2);
    }
  60%{
   box-shadow: 0 0 0 10px rgba(62,45,202, 0.2),
               0 0 0 50px rgba(62, 45,202, 0.2)
,
               0 0 0 30px rgba(62,45, 202, 0.2);
     }
  80%{
   box-shadow: 0 0 0 0px rgba(62,45,202 0.2),
               0 0 0 40px rgba(62,45,202, 0.2),
               0 0 0 60px rgba(62,45,202 0.2),
               0 0 0 80px rgba(62,45,202, 0.2);
     }
  100%{
   box-shadow: 0 0 0 20px rgba(0,98, 90, 0.2),
               0 0 0 40px rgba(0,98, 90, 0.2),
               0 0 0 60px rgba(0,98, 90, 0.2),
               0 0 0 90px rgba(0,98, 90, 0.2),
               0 0 0 120px rgba(0,98, 90, 0.2);
     }
}

Output:

The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times. Specify when the style change will happen in percent also you can use keywords “from” and “to”. which is the same as 0% and 100%. where 0% is the starting point of the animation and 100% is the ending point of the animation.

Recommended Posts:

Most Popular CSS Frameworks in 2020

What is JavaScript?

Difference between the Java and JavaScript

jQuery Introduction

References:

www.w3school.com

instagram/coding_gyan_