На сегодняшний день уже существуют 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]-->
<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;
}
#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;
}
<?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');
}
Результат
Как это все работает можно посмотреть тут.Приношу свои извинения, выкладываю новую ссылку на рабочий пример Предыдущую ссылку оставляю, что бы доказать что проблема из за .svg, достаточно убрать в firebug строку с подключением .svg. На локалке все отлично работало. Ну и сейчас улучшил трансформацию, но старая ссылка тоже рабочая, для новых браузеров.
Добавил user-select: none, ссылку на пример обновил.
