Создание эффекта глянцевой фотографии при помощи CSS3
28 октября 2013 | Опубликовано в css | 2 Комментариев »
Все чаще и чаще мы создаем эффекты, которые обычно создавались в графическом программном обеспечении, таком как Adobe Photoshop, используя только CSS. И последнее время новые эффекты становятся достижимы с помощью CSS3. В этом уроке мы рассмотрим, как воссоздать распространенный эффект глянцевого изображения, используя некоторые градиенты CSS3.
Структура HTML
В этом уроке мы будем использовать самые базовые настройки HTML5. Мы хотим добиться этого эффекта наиболее простым путем, используя в основном CSS. Так что наилучшая практика – создавать HTML настолько чистым и внятным, насколько это возможно.
Кроме структуры страницы и оболочки у нас изначально есть только один элемент DIV класса photo, в который мы вложили тэг IMG.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Glossy Gradient Effect</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <div class="photo"> <img src="images/bag.jpg" alt="Bag"> </div> </div> <!-- END Wrapper --> </body> </html>
Вот и все с HTML. Теперь перейдем к CSS.
Создание стилей CSS
Общее
Сначала мы настроим страницу, чтобы потом можно было сконцентрироваться на элементе фотографии. Здесь мы просто добавим цвет фона странице целиком и настроим внешний элемент страницы.
body { background: #EDEFF4; } #wrapper { margin: 30px auto; width: 600px; }
Создание стилей для блока, содержащего фотографию
Следующий шаг – создание стилей для содержащего фотографию блока. Здесь мы определим высоту и ширину блочного элемента. Это наиболее важный момент в этом шаге, как и установка относительного значения позиционирования. Все остальное – исключительно в эстетических целях. В том числе отличная двойная тень вокруг всего изображения и граница толщиной в 1 пиксель.
.photo { margin: 30px auto; height: 401px; width: 602px; position: relative; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5); -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5); -o-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5); box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5); } .photo img { border: 1px solid rgba(255, 255, 255, .1); }
Теперь изображение хорошо выглядит. Не хватает лишь одной вещи – самого глянцевого эффекта. Это последний шаг в этом уроке.
Создание стилей для псевдоэлемента фотографии :before
Это наиболее важный шаг всего эффекта. Мы собираемся создать стили пседоэлемента :before. Таким образом мы можем добавить стиль глянцевого вида поверх фото без необходимости добавления дополнительной разметки в HTML. Так более наглядно. Здесь мы устанавливаем абсолютное значение позиционирования этого элемента над фото, вот почему важно установить position: relative; в предыдущем шаге. И мы применяем некоторые CSS3 градиенты к фону этого нового псевдоэлемента.
.photo:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))); background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); }
Все эти цифры могут выглядеть пугающе для начинающих. Но в сущности это значение RGBa, т.е., значения цвета, к которым мы можем применить прозрачность, внутри «остановок» градиента. Итак, опишем, что происходит. У нас есть две половины градиента, идущие от левого верхнего в правый нижний угол. Первая половина идет от полностью прозрачного до 50% прозрачного белого. Вторая половина идет в обратном направлении к полностью прозрачному и остается такой. Это то, что создает диагональную линию.
Заключение
Конечный результат выложен на Github, так что не стесняйтесь заходить и развивать его! Надеемся, Вам понравился этот урок и он Вам пригодится.
Автор урока Harry Atkins.
Перевод — Дежурка.
Смотрите также:
549