Geekly Articles each Day
📜 ⬆️ ⬇️

Crossbrowser CSS3 Reflection

image
To date, there are already box-reflect and mask-image that allow you to create a reflection of the elements, but these properties are only available in Safari and Chrome, and they do not work as we would like. Therefore, I want to tell you how to implement cross-browser reflection on CSS.

Create an HTML document

Let's get to work. Let's start by writing the 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]-->
To create the CSS Reflection we need 3 blocks:
 <div id = "plane">
	 <span id = "elrefl"> CSS3 Reflection <span id = "refl"> CSS3 Reflection </ span> </ span>
 </ div>

style.css

Let's start by writing styles for:
 #plane {
	 padding-top: 5%;
	 left: 0;
	 top: 10%;
	 width: 100%;
	 bottom: 0;
	 position: absolute;
	 overflow: hidden;
 }
In this element there is no background, as the background is formed from the glow (box-shadow) of the element, and the overflow property is indicated to leave the top in black, which allows our reflection to look better. And now we will start creating the reflected element and the reflection element 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;
 }
At this stage, we have created two large identical buttons, after which we reflect the second one vertically and add a blur. Since standard blur is available only in webkit, create a filter.svg with 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 - add transparency and make the reflection cross-browser:
 .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');
 }

Result

How it all works can be found here .

I apologize, I post a new link to the working example. I leave the previous link to prove that the problem is due to .svg, it is enough to remove the line with the connection .svg in firebug. On LAN, everything worked fine. Well, now I have improved the transformation, but the old link is also working, for new browsers.

Added user-select: none, updated example link.

')

Source: https://habr.com/ru/post/140380/

More articles:


All Articles