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 see the code snippet below;
img {
-webkit-box-reflect: below 10px;
}
In the above code, we seperated the reflection from the real object by 10px;
(Image source: Eight Weeks Of Bruce)
Masking with Gradients
The reflection effect that we commonly see is the fade-out at the bottom and displaying only half or less of the real object. To replicate this kind of effect, we can apply CSS3 Gradients to mask the object, like so;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
This code will result in the following presentation;
(Image source: What’s Liberal About The Liberal Arts?)
We can also use color-stop to control transitions and make the reflection look nicer:
img {
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}
(Image source: Everything Matters!)
Alternatives for Firefox
This property, however, is only working in Webkit browsers (meaning Safari and Chrome) at the moment. To deliver the same effect in Firefox, you need another route: using -moz-element() function. This function essentially will generate or replicate the content from specific HTML elements. Let’s take a look at the following example;
We have an image wrapped in a <div> with moz-reflect id;
<div id="moz-reflect">
<img src="images/everything_matters.large.jpg">
</div>
And, to hold the reflection, we will use :after pseudo-element, as follows;
#moz-reflect:after {
content: "";
display: block;
background: -moz-element(#moz-reflect) no-repeat;
width: auto;
height: 375px;
margin-bottom: 100px;
-moz-transform: scaleY(-1);
}
The -moz-transform with negative scale is used to flip the generated object upside-down. Also, make sure the height is precise enough to the real object’s height to avoid unnecessary extra lines for positioning the reflection.
Unfortunately, there is still no easy way to create a nice reflection effect in Firefox using this practice. The code above will simply create the reflection, without the fade effect.
(Image source: Strange Bedfellows)
Further References
Related posts:
- CSS3 Repeating Gradients [CSS3 Tips]
- CSS3 Border-Image Property: Making Photos Really Cool!
- 6 Cool Image Captions with CSS3
- CSS3 Circular and Elliptical Gradients [CSS3 Tips]
CSS3 Image Reflection [CSS3 Tips]
