Створення ефекту віддзеркалення за допомогою css3 і, css

Ефект віддзеркалення, застосовуваний до зображень - один з найбільш чудових ефектів, що з'явилися в сучасному веб-дизайні.

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

Інша проблема полягає в тому, що ваш ефект може працювати не у всіх браузерах. На щастя, тепер у нас є утиліта, яка називається Reflection.js.

У цьому уроці я розповім, як створити ефект відображення двома способами: спочатку - на чистому CSS, потім - за допомогою Reflection.js.

необхідні ресурси

Для подальшої роботи нам знадобляться:

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

Тут ви можете завантажити вихідні файли для даного уроку.

CSS3-версія

У наш HTML-файл ми вставимо зображення і обернём його HTML5-елементом

:

У наш CSS-файл ми повинні внести наступні зміни:

  1. Додати зверху зображення відступ в 60 пікселів і відцентрувати його по екрану значенням auto;
  2. Використовувати властивість -webkit-box-reflect. щоб відобразити зображення вниз;
  3. Накласти на зображення маску за допомогою -webkit-gradient, щоб відобразити тільки частина відображення.

Використовуючи наведений вище код, ми отримали ось таке симпатичне зображення:

Створення ефекту віддзеркалення за допомогою css3 і, css

Згідно сайту розробників Mozilla. CSS-властивість -webkit-box-reflect працює поки тільки в браузерах Google Chrome і Opera.

Хоча є й інші способи отримати бажаний ефект, ситуація вже зрозуміла: створити даний ефект складно і витратно за часом.

Але в цій справі є й світла сторона: Reflection.js позбавить нас від необхідності піклуватися про кросбраузерності. Подивимося, як легко ми доб'ємося бажаного, використовуючи цю бібліотеку.

MooTools-версія

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

У наш HTML-файл ми, як і в попередньому прикладі, повинні розмістити зображення, обгорнутих елементом

. Крім того, додамо зображенню клас reflect.

Цей клас буде використовуватися reflection.js для застосування одного і того ж ефекту до всіх зображень цього класу:

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

Готово! Ось як все може бути просто з таким чудовим інструментом, як Reflection.js:

Створення ефекту віддзеркалення за допомогою css3 і, css

висновок

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

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

Переклад статті «Create Reflection Effect Using CSS3 and Reflection.js» був підготовлений дружною командою проекту Сайтобудування від А до Я.

Схожі статті