CSS3 Image Reflection [CSS3 Tips]
This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series. So far, we have discussed a lot of new properties in CSS3 . Beyond that, there are actually a few other properties that are currently not included in CSS3 official specifications that are worth to try out, one of which is the box-reflect property that is initiated by Webkit . This property can reflect on the objects specified. Basic Reflection The basic implementation is quite intuitive; let’s say, we want the reflection below the real object. We can write: img { -webkit-box-reflect: below; } (Image source: Eight Weeks Of Bruce ) This example shows how we reflect an image below (the position) the object. But, in this case, we can also hold the reflection to the right , left , and above . Reflection Offset Offset is used to define the gap between the reflection and the real object reflected. Let’s s...