Создание эффекта отражения при помощи CSS3 и reflection.js

0 ∞

Эффект отражения, применяемый к изображениям – один из самых замечательных эффектов, появившихся в современном веб-дизайне.

Однако создание этого эффекта исключительно средствами CSS3 – довольно долгое и кропотливое занятие. К тому же, кроме стиля изображений, приходится менять и другие части ваших css файлов.

Другая проблема заключается в том, что ваш эффект может работать не во всех браузерах. К счастью, теперь у нас есть утилита, которая называется Reflection.js.

Она адаптирована для двух JavaScript-фреймворков: jQuery и MooTools, и значительно упрощает и ускоряет создание эффекта отражения.

В этом уроке я расскажу, как создать эффект отражения двумя способами: сначала – на чистом CSS, потом – при помощи Reflection.js.

Итак, начнём.

Содержание

Необходимые ресурсы

Для дальнейшей работы нам понадобятся:

  • изображение на ваш вкус;
  • Reflection.js;
  • время и терпение.

Здесь вы можете загрузить исходные файлы для данного урока.

Анимация в CSS3 при помощи ключевых кадров

CSS3-версия

Разметка

В наш HTML-файл мы вставим изображение и обернём его HTML5-элементом <figure>:

<figure>        <img align="center" alt="rocket" src="img/rocket.png">    </figure>

Стиль

В наш CSS-файл мы должны внести следующие изменения:

  1. Добавить сверху изображения отступ в 60 пикселей и отцентрировать его по экрану значением auto;
  2. Использовать свойство -webkit-box-reflect, чтобы отразить изображение вниз;
  3. Наложить на изображение маску при помощи -webkit-gradient, чтобы отобразить только часть отражения.
img{ margin: 60px auto 0 auto; -webkit-box-reflect:below -1px  -webkit-gradient(linear, left top, left bottom, from(transparent),  color-stop(67%, transparent) , to(rgba(250, 250, 250, 0.5))); }

Используя приведённый выше код, мы получили вот такое симпатичное изображение:

Стиль
33 CSS3 эффекта при наведении, о которых вы должны знать

Согласно сайту разработчиков Mozilla, CSS-свойство -webkit-box-reflect работает пока только в браузерах Google Chrome и Opera.

Хотя есть и другие способы получить желаемый эффект, ситуация уже ясна: создать данный эффект сложно и затратно по времени.

Но в этом деле есть и светлая сторона: Reflection.js избавит нас от необходимости заботиться о кроссбраузерности. Посмотрим, как легко мы добьёмся желаемого, используя эту библиотеку.

MooTools-версия

Установка

Прежде чем начать работать с разметкой, загрузите reflection.js и mootools.js отсюда. Нам нужно также создать ссылки на оба этих файла в шапке нашего сайта:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>How to Create a Reflection Effect using CSS3 and Reflection.js for    MooTools</title>    <script src="js/mootools.js" type="text/javascript"></script>    <script src="js/reflection.js" type="text/javascript"></script></head><body></body></html>

Разметка

В наш HTML-файл мы, как и в предыдущем примере, должны поместить изображение, обёрнутое элементом <figure>. Кроме того, добавим изображению класс reflect.

Этот класс будет использоваться reflection.js для применения одного и того же эффекта ко всем изображениям этого класса:

<figure>        <img src="img/rocket.png" align="center" class="reflect" alt="rocket"/> </figure>
Создание CSS-анимации при помощи Move.js

Скрипт

MooTools-версия скрипта использует для создания эффекта метод reflect(). Вы можете варьировать различные опции. Например, опцию «opacity» (прозрачность):

document.ready(function() {    var options = {        opacity: 0.73    };    $('.reflect').reflect(options);});

Готово! Вот как всё может быть просто с таким замечательным инструментом, как Reflection.js:

Скрипт

Заключение

Хотя создать эффект отражения можно при помощи только Photoshop или CSS3, это займёт много времени и поставит перед дизайнером ряд дополнительных вопросов. Библиотека Reflection.js, написанная Кристофом Бейлом, поможет вам реализовать этот замечательный эффект.

Рекомендую воспользоваться этим замечательным инструментом вместо Photoshop или прямого редактирования CSS-свойств, чтобы упростить и ускорить разработку.

РедакцияПеревод статьи «Create Reflection Effect Using CSS3 and Reflection.js»