На сегодняшний день уже существуют 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
