Создание эффекта отражения с помощью скрипта Reflection.js и CSS3
Поиск

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

Nikel, 02.05.2019

В сегодняшнем уроке я покажу вам, как создать эффект отражения картинки на сайте. Сначала рассмотрим более простой и кроссбраузерный способ, с использованием специального скрипта reflection.js, а затем рассмотрим, какие возможности нам предлагают современные технологии и CSS3.

Разметка HTML

Код  HTML  очень прост: мы  будем добавлять отражения к картинкам, обернутым в тег figure HTML5.Этот элемент очень часто используется для группирования изображений.

Способ с использованием jQuery

Установка

Для начала нам потребуется загрузить скрипты в разделе head. Это будет jQuery, который мы подключим удаленно, используя библиотеки Google, и  jQuery версия скрипта отражений reflection.js, его можно скачать с гитХаба здесь. Не забудьте  указать правильный путь к вашему скрипту на сервере, у меня это "js/reflection.js".

Внесение изменений в разметку

По сути код останется прежним,  мы только добавим класс reflect. Этот класс будет использоваться reflection.js для создания отражения у любого изображения, имеющего этот класс.

Код jQuery

Скрипт, который нам надо написать и добавить к странице, чтобы все заработало, также не представляет особой сложности. Нужно указать класс .reflect для картинки, у которой мы хотим создать отражение, а также дополнительные опции, такие как степень прозрачности отражения (opacity:0.75) и его высота относительно размеров картинки (height:1/4).

Вот, собственно и все, что нужно сделать. У вас должен получиться подобный результат.

Также можете посмотреть как работает скрипт в моем примере.

Демонстрационная версия

Создание отражений на чистом CSS

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

Скажу сразу, что не все браузеры поддерживают возможность создания отражений, поэтому код не будет таким универсальным, как в первом случае. Он будет работать только в браузерах на основе Chromium(Яндекс.браузер,Google Chrome) и в Firefox, но при этом полностью отсутствует поддержка Internet Explorer и Edge.

Код HTML

Итак, мы возвращаемся к разметке. Добавим к элементу figure класс .reflection и идентификатор .reflect.

Перво-наперво рассмотрим как сделать отражение, которое бы работало в Firefox, так как это более сложно. Для его корректной работы нам понадобится маска на основе SVG, которая будет задавать плавный градиент от максимума до нуля для отражения .

Дополним наш HTML таким кодом (вставив его после элемента figure)

Стиль CSS

В качестве отражения для браузера Firefox будет использован псевдоэлемент :after элемента .reflection. Мы его отразим, сделаем полупрозрачным и добавим градиентную маску. Для этого используется особое свойство CSS -moz-element, работающее только в Мозилле. Директива @supports, позволяет проверить работает та или иная возможность в браузере.

Укажем также размеры контейнера для изображения .reflection, они должны совпадать с размерами картинки.

CSS для Chrome

Он будет гораздо менее громоздким. Мы будем использовать старое нестандартное свойство-webkit-box-reflect  для отражения изображения вниз а маска будет задаваться с помощью-webkit-градиента, чтобы скрыть отражение внизу и сделать его меньше оригинальной картинки.

Стили, как и в случае с Firefox будут применяться к figure с классом .reflection.

Итоговый результат и демонстрационный пример, вы можете посмотреть ниже.

Демонстрационный пример

Несмотря на то, что с помощью CSS3 можно получать  хороший эффект отражения, все еще есть проблемы, которые нужно решать, и может потребоваться много времени, чтобы обеспечить хотя бы неполную кроссбраузерность.  Вместо того, чтобы прибегать к использованию исключительно стилей, лучше применять плагин JavaScript, чтобы сделать вашу работу проще и быстрее.