Как создать отражение при помощи CSS3

Как создать отражение при помощи CSS3Благодаря новым спецификациям CSS3 вы можете с лёгкостью создавать те эффекты, которые раннее были доступны только при помощи изображений. Как к примеру, тени у изображений или элементов, объёмные элементы или градиенты. Теперь при помощи специальных префиксов box-reflect и mask-image можно создавать красивые отражения. Правда, к сожалению в полной мере эти свойства доступны только в Chrome и Safari, так что для того чтобы ваш дизайн выглядел аккуратно и одинаково во всех браузерах необходимо прибегнуть к некоторым ухищрениям.

И так, сегодня мы попробуем с вами создать красивые отражения только при помощи CSS3.

Сначала мы создадим 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]-->

Для создания отражения нам понадобиться 3 блока

<div id="plane">
    <span id="elrefl">Отражение на CSS3 <span id="refl">Отражение на CSS3</span></span>
</div>

Начнём с написания простого 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;
}

Добавляем 2 больших кнопки, и вторую кнопку делаем отражением при помощи размытия

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

Полная версия урока доступна здесь.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *