< 1 min read
In this chapter you will learn how to reflect an image.
The box-reflect property is used to create an image reflection.
box-reflect
The value of the box-reflect property can be: below, above, left , or right.
below
above
left
right
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.
Here we want the reflection below the image:
img { -webkit-box-reflect: below; }
Here we want the reflection to the right of the image:
img { -webkit-box-reflect: right; }
To specify the gap between the image and the reflection, add the size of the gap to the box-reflect property.
Here we want the reflection below the image, with a 20px offset:
img { -webkit-box-reflect: below 20px; }
We can also create a fade-out effect on the reflection.
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)); }
Powered by BetterDocs
You must be logged in to post a comment.