CSS3 Image Reflection Techniques
Up until now, we’ve explored numerous fresh features introduced by CSS3. But, there’s more to CSS3 than meets the eye, including several properties not yet official but certainly noteworthy. One such property is box-reflect, brought to us by Webkit, designed to create reflections of objects.
Creating Simple Reflections
Setting up a basic reflection is straightforward. For instance, if we want a reflection to appear directly below an object, we can use the following code:
img {
-webkit-box-reflect: below;
}
This demonstration reflects an image below its original position. However, reflections can also be positioned to the right, left, or above the object.
Adjusting Reflection Gap
The Offset feature allows us to control the distance between the reflection and its source. Consider the following example:
img {
-webkit-box-reflect: below 10px;
}
Here, a 10px gap is created between the object and its reflection.
Enhancing Reflections with Gradient Masking
A popular reflection effect is the gradual fade-out at the bottom, revealing only a portion of the original object. To achieve this, we can employ CSS3 Gradients as a masking technique:
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
This approach produces the effect seen here:
To further refine the transition and enhance the reflection’s appearance, the color-stop feature can be utilized:
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)));
}
Reflection Effects in Firefox
Unfortunately, the reflection property we discussed is currently only supported in Webkit-based browsers like Safari and Chrome. For those using Firefox and seeking similar visual effects, there’s a workaround: the -moz-element() function. This function can duplicate content from specified HTML elements. Here’s an example to illustrate this approach:
An image is enclosed within a <div> element assigned with the moz-reflect id:
<div id="moz-reflect"> <img src="images/everything_matters.large.jpg"> </div>
To simulate the reflection, the :after pseudo-element comes into play as shown below:
#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 property with a negative scale flips the replicated object, creating an upside-down effect. It’s crucial to adjust the height accurately to match the original object to ensure a clean reflection without any visual glitches.
However, achieving a smooth fade-out effect in Firefox using this method is not straightforward. The code provided here will generate a reflection but won’t include the graceful fading seen in Webkit browsers.
