This content originally appeared on DEV Community and was authored by Suprabha
The `-webkit-box-reflect` CSS property lets you reflect the content of an element in one specific direction.
We can create the reflections using the box-reflect property.
/* Direction values */
-webkit-box-reflect: above / below / left / right;
/* can also add offset value */
-webkit-box-reflect: below 10px;
/* even add gradient */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
Example
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png" />
img {
-webkit-box-reflect: right;
}
Output:
Checkout the codepen here:
Browser Support ?
Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.
Reference ?
| ??? suprabha.me |
This content originally appeared on DEV Community and was authored by Suprabha
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Suprabha | Sciencx (2021-06-12T19:15:27+00:00) CSS Box Reflect. Retrieved from https://www.scien.cx/2021/06/12/css-box-reflect/
" » CSS Box Reflect." Suprabha | Sciencx - Saturday June 12, 2021, https://www.scien.cx/2021/06/12/css-box-reflect/
HARVARDSuprabha | Sciencx Saturday June 12, 2021 » CSS Box Reflect., viewed ,<https://www.scien.cx/2021/06/12/css-box-reflect/>
VANCOUVERSuprabha | Sciencx - » CSS Box Reflect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/12/css-box-reflect/
CHICAGO" » CSS Box Reflect." Suprabha | Sciencx - Accessed . https://www.scien.cx/2021/06/12/css-box-reflect/
IEEE" » CSS Box Reflect." Suprabha | Sciencx [Online]. Available: https://www.scien.cx/2021/06/12/css-box-reflect/. [Accessed: ]
rf:citation » CSS Box Reflect | Suprabha | Sciencx | https://www.scien.cx/2021/06/12/css-box-reflect/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.