Design, CG Graphics & Inspiration
Cross Browser Reflection of the Elements on CSS3

Cross Browser Reflection of the Elements on CSS3

Currently, there are box-reflect and mask-image, that allow to create the reflection of the elements, but these properties are accessible only in Safari and Chrome, and work not so as desirable. Therefore I want to tell you how to realize a cross browser reflection on CSS3.

First we create HTML document

Let’s start our work. We will begin with writing HTML code:

<!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->	
<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->

For creation of CSS Reflection we will need 3 blocks:

<div id="plane">
	<span id="elrefl">CSS3 Reflection<span id="refl">CSS3 Reflection</span></span>
</div>

style.css

We will begin with writing styles for:

#plane {
	padding-top: 5%;
	left: 0;
	top: 10%;
	width: 100%;
	bottom: 0;
	position: absolute;
	overflow: hidden;
}

There is no background in this element, because a background appears from luminescence (box – shadow) of the element, and property overflow is indicated in order to leave the top in a black, that allows our reflection look better. And now we will begin the creation of the reflected element and element-reflection itself:

#elrefl, #refl {
	color: #004;	
	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 50px;
	background-color: #FFE;
	font-weight: bold;
	padding: 30px;
	display: inline-block;	
	border-radius: 30px;
        box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset 
        rgba(0,0,0,.8) 0 0 20px;
        border-radius: 30px;	
	position: relative;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;
}

#refl {
	position: absolute;
	z-index: -1;	
	top: 100%;
	left: 0;	
	-webkit-transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1);
  
    /*filter: url(filter.svg#blur); FF, Opera + IE10*/
	-webkit-filter: blur(2px); /* webkit */	
	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}

On this stage we created two large identical buttons, and after that we reflect the second one on a vertical line and add blur. Because standard blur is accessible only in webkit, we create filter.svg with the help of the following code:

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
    </filter>
  </defs>
</svg>

Cross browser compatibility

There are two things left – to add transparency and do the reflection compatible:

.modern #refl {
	opacity: .25;
}
.ie9 #refl {
	margin-top: 20px;
	margin-left: -10px;	
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25)      progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
	margin-top: -20px;
	margin-left: -7px;	
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

Here you can see how everything works.

You might also be interested in..

How to Create a Fading Dark Gradient on CSS3 without Images
Stop-watch on CSS3 Without Any Pictures or Scripts
Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Ilya Pestov,
  • May 31, 2012

SHARE THIS POST

WebDesigner and Developer, visit his website: impress.su.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.