Создаем фотоэффект глянца с помощью CSS3

Создаем фотоэффект глянца с помощью CSS3

От автора: все чаще и чаще мы создаем эффекты, которые обычно делались в графических редакторах, например 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="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
 
  <body>
    <div id="wrapper">
 
        <div class="photo">
            
        </div>    
 
    </div> <!-- END Wrapper -->
  </body>
  </html>

Вот и весь HTML! Теперь перейдем к разделу CSS.

Стили CSS

Общие

Сначала просто установим стили страницы, чтобы можно было вплотную заняться элементом photo. Здесь мы всего лишь добавляем ко всей странице фоновый цвет и устанавливаем обертывающий DIV.

body { 
    background: #EDEFF4; 
}
 
#wrapper { 
    margin: 30px auto; 
    width: 600px;
}

Назначение стилей DIV-у с фото

Следующим шагом назначаем стили содержащему div’у. Здесь мы определяем высоту и ширину блоку. На данном этапе это самая важная задача, как и задание свойству position значения relative. Все остальное – чисто в эстетических целях. Вроде классной двойной тени блока вокруг всего изображения и рамки в 1px.

.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

Это самый важный шаг всего эффекта, мы собираемся назначить стили псевдоэлементу div’а :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 (значениями цвета, к которым мы можем применить непрозрачность) внутри «stop’ов» градиентов. Как бы объяснить, что происходит … у нас есть две половинки градиента, идущего с ВЕРХНЕГО ЛЕВОГО угла к НИЖНЕМУ ПРАВОМУ. Первая половина начинается с полной прозрачности до 50% прозрачного белого. Вторая половина идет обратно к полной прозрачности (вот как создается диагональная линия) и такой и остается.

Заключение

Вот и весь мини-учебник. Не стесняйтесь потревожить меня в комментариях, если у вас есть вопросы или предложения. Я выложил продукт целиком на Github, так что не бойтесь зайти и взять его!

Надеюсь, вам понравится и пригодится этот учебник.

Автор: Harry Atkins

Источник: http://www.onextrapixel.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Алексей

    Спасибо за познавательный урок! Только мне кажется, проще все же сделать глянец в фотошопе, и к тому же, не все браузеры поддерживают свойства css3.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree