HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
In this chapter you will learn how to reflect an image
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
.
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- |
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));
}