CSS Image Reflection
In this chapter you will
learn how to reflect an image.
CSS Image Reflections
The box-reflect property is used to create an image
reflection.
The value of the box-reflect property can be: below, above, left , or right.
Browser Support
The numbers in the table
specify the first browser version that fully supports the property.
Numbers followed by
-webkit- specify the first version that worked with a prefix.
|
Property |
|||||
|
box-reflect |
4.0 -webkit- |
79.0 -webkit- |
Not supported |
4.0 -webkit- |
15.0 -webkit- |
Examples
Example
Here we
want the reflection below the image:
img {
-webkit-box-reflect: below;
}
Example
Here we
want the reflection to the right of the image:
img {
-webkit-box-reflect: right;
}
CSS Reflection Offset
To specify the gap between
the image and the reflection, add the size of the gap to the box-reflect property.
Example
Here we
want the reflection below the image, with a 20px offset:
img {
-webkit-box-reflect: below 20px;
}
CSS Reflection With Gradient
We can also create a
fade-out effect on the reflection.
Example
Create a
fade-out effect on the reflection:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}
