Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание эффекта глянцевой фотографии при помощи 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.
Перевод — Дежурка.

Смотрите также:




Комментарии