CSS3 Box-Shadow Property
In our previous topic, the process of applying shadows to texts with the Text-Shadow feature was explained. The Box-Shadow property is a Css property that is used in the same way and allows to apply a shadow effect to the boxes.
In older versions of browsers it is necessary to use the -webkit- and -moz- prefixes. (Example at the bottom)
What we need to do is specify the horizontal and vertical positions of the shadow. Optionally, we can also use shadow color and blur effect.
Below are different examples of the box-shadow property:
.box1 {
box-shadow: 2px 2px;
}
Negative values make the shadow pop to the left or top.
.box1 {
box-shadow: -2px -2px;
}
Shade color can be specified:
.box1 {
box-shadow: 2px 2px red;
}
The amount of dispersion of the shadow can be specified using the blur effect:
.box1 {
box-shadow: 2px 2px 5px red;
}
Different looks can be achieved by applying multiple shadows, for example applying shadows all over the box:
.box1 {
box-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px red;
}
In older browser versions, the -webkit- and -moz- prefixes must also be used for these codes to work:
.box1 {
box-shadow: 2px 2px 5px red;
-webkit-box-shadow: 2px 2px 5px red;
-moz-box-shadow: 2px 2px 5px red;
}
Check out the topic examples section.
css box shadow, css box shadow effect, applying shadow to the boxes
EXERCISES
|
Example of a button-looking link with shadow effect applied
|
Try It
|
The transition property used in this example is explained in our next topics.
|
Css Box Shadow Tutorials
|
Try It
|
We can get different styles using the box-shadow property.
|
Css shadow effect using ::after selector
|
Try It
|
In this example, a shadow is given to the div element, and a shadow effect is created after the box by using the ::after selector.
|
Examples of applying shadows to boxes with css
|
Try It
|
Read 818 times.