Кроссбраузерное отражение элементов на CSS3

в 6:44, , рубрики: css3, reflection, Песочница, метки: ,

image

На сегодняшний день уже существуют box-reflect и mask-image, которые позволяют создавать отражение элементов, но данные свойства доступны только в Safari и Chrome, да и работают не так как хотелось бы. Поэтому я хочу рассказать Вам как реализовать кроссбраузерное отражение на CSS.

Создаем HTML документ

Приступим к работе. Начнём с написания HTML-кода.

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

Для создания самого CSS Reflection нам потребуется 3 блока:

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

style.css

Начнем с написания стилей для :

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

В данном элементе нет фона, так как фон образуется от свечения (box-shadow) элемента , а свойство overflow указано для того, чтобы оставить верхушку в черном цвете, что позволяет нашему отражению смотреться лучше.

А сейчас мы приступим к созданию отражаемого элемента и самого элемента-отражения:

#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;
}

#refl {
	position: absolute;
	z-index: -1;	
	top: 100%;
	left: 0;	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-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;
}

На данном этапе мы создали две больших одинаковых кнопки, после чего вторую из них отражаем по вертикали и добавляем размытие (blur). Так как стандартный blur доступен только в webkit, создаем filter.svg со следущим кодом:

<?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>

Кроссбраузерность

Осталось две вещи — добавить прозрачность и сделать отражение кроссбраузерным:

.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');
}

Результат

Как это все работает можно посмотреть тут

Автор: pestov


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js