{"id":15596,"date":"2012-11-30T21:01:29","date_gmt":"2012-11-30T13:01:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15596"},"modified":"2024-04-04T01:25:05","modified_gmt":"2024-04-03T17:25:05","slug":"css-reflection","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-reflection\/","title":{"rendered":"CSS3 Image Reflection Techniques"},"content":{"rendered":"

Up until now, we\u2019ve explored numerous fresh features introduced by CSS3<\/a><\/strong>. But, there\u2019s more to CSS3 than meets the eye, including several properties not yet official but certainly noteworthy. One such property is box-reflect<\/code>, brought to us by Webkit<\/strong>, designed to create reflections of objects.<\/p>\n

Creating Simple Reflections<\/h2>\n

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:<\/p>\n

\r\nimg {\r\n  -webkit-box-reflect: below;\r\n}\r\n<\/pre>\n
\"Example<\/figure>\n
\n
<\/i><\/div>\n
Eight Weeks Of Bruce<\/a><\/div>\n
<\/div>\n<\/div>\n
This demonstration reflects an image below<\/strong> its original position. However, reflections can also be positioned to the right<\/code>, left<\/code>, or above<\/code> the object.<\/p>\n
Adjusting Reflection Gap<\/h2>\n
The Offset<\/strong> feature allows us to control the distance between the reflection and its source. Consider the following example:<\/p>\n
\r\nimg {\r\n  -webkit-box-reflect: below 10px;\r\n}\r\n<\/pre>\n
Here, a 10px<\/code> gap is created between the object and its reflection.<\/p>\n
\"Image<\/figure>\n
\n
<\/i><\/div>\n
Eight Weeks Of Bruce<\/a><\/div>\n
<\/div>\n<\/div>\n
<\/i>  View demo <\/span><\/a><\/p>\n
Enhancing Reflections with Gradient Masking<\/h2>\n
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<\/strong> as a masking technique:<\/p>\n
\r\n-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));\r\n<\/pre>\n
This approach produces the effect seen here:<\/p>\n
\"Image<\/figure>\n
\n
<\/i><\/div>\n
What\u2019s Liberal About The Liberal Arts?<\/a><\/div>\n
<\/div>\n<\/div>\n
To further refine the transition and enhance the reflection\u2019s appearance, the color-stop<\/code> feature can be utilized:<\/p>\n
\r\nimg {\r\n  -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)));\r\n}\r\n<\/pre>\n
\"Image<\/figure>\n
\n
<\/i><\/div>\n
Everything Matters!<\/a><\/div>\n
<\/div>\n<\/div>\n
<\/i>  View demo <\/span><\/a><\/p>\n
Reflection Effects in Firefox<\/h2>\n
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\u2019s a workaround: the -moz-element()<\/code> function. This function can duplicate content from specified HTML elements. Here\u2019s an example to illustrate this approach:<\/p>\n
An image is enclosed within a <div><\/code> element assigned with the moz-reflect<\/code> id:<\/p>\n
\r\n<div id=\"moz-reflect\">\r\n  <img src=\"images\/everything_matters.large.jpg\">\r\n<\/div>\r\n<\/pre>\n
To simulate the reflection, the :after<\/code> pseudo-element<\/strong> comes into play as shown below:<\/p>\n
\r\n#moz-reflect:after {\r\n  content: \"\";\r\n  display: block;\r\n  background: -moz-element(#moz-reflect) no-repeat;\r\n  width: auto;\r\n  height: 375px;\r\n  margin-bottom: 100px;\r\n  -moz-transform: scaleY(-1);\r\n}\r\n<\/pre>\n
The -moz-transform<\/code> property with a negative scale flips the replicated object, creating an upside-down effect. It\u2019s crucial to adjust the height<\/code> accurately to match the original object to ensure a clean reflection without any visual glitches.<\/p>\n
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\u2019t include the graceful fading seen in Webkit browsers.<\/p>\n
\"Firefox<\/figure>\n
\n
<\/i><\/div>\n
Strange Bedfellows<\/a><\/div>\n
<\/div>\n<\/div>\n
<\/i>  Visit demo <\/span><\/a>\n<\/i>  Download source <\/span><\/a><\/p>\n
Additional Resources<\/h2>\n