Marusya's School Notes

CSS3 Box-Shadow Property

The CSS3 box-shadow property applies shadow to elements. In its simplest style form {box-shadow: 10px 10px;}, you only specify the horizontal shadow and the vertical shadow:

div {
   width: 300px;
   height: 150px;
   padding: 15px;
   margin-bottom: 30px;
   background-color: yellow;
   box-shadow: 10px 10px;
}

The style of {box-shadow: 10px 10px grey;} will add a color to the shadow:

div {
   width: 300px;
   height: 150px;
   padding: 15px;
   margin-bottom: 30px;
   background-color: yellow;
   box-shadow: 10px 10px grey;
}

Changing the style to {box-shadow: 10px 10px 5px grey;}, we've inserted another value before the color to create a blur effect to the shadow:

div {
   width: 300px;
   height: 150px;
   padding: 15px;
   margin-bottom: 30px;
   background-color: yellow;
   box-shadow: 10px 10px 5px grey;
}