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

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

От автора: все чаще и чаще мы создаем эффекты, которые обычно делались в графических редакторах, например Adobe Photoshop, применяя один лишь CSS. А последнее время от CSS3 можно добиться дополнительных новых эффектов.

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

скачать исходникидемо

Структура HTML

Итак, в этом кратком мини-учебнике мы применим структуру основного HTML5. При наименьшем количестве возможных вариантов, так как нужного эффекта следует добиться, в основном пользуясь CSS. Поэтому лучше всего сохранить HTML настолько чистым и семантическим, как только можно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, помимо страничной структуры и обертки, у нас в основе имеется всего один элемент DIV (с классом photo), в который мы поместили тег IMG.

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

Стили CSS

Общие

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Теперь изображение смотрится хорошо. Но нам кое-чего не хватает – самого глянцевого эффекта. И это – последний этап данного мини-учебника.

Назначение стилей псевдоэлементу фотографии :before

Это самый важный шаг всего эффекта, мы собираемся назначить стили псевдоэлементу div’а :before. Таким образом можно создать стиль глянцевого вида вверху фотографии без необходимости добавления дополнительной разметки HTML. Это более семантично. Здесь мы абсолютно позиционируем этот элемент поверх фото (вот отчего так важно установить в предыдущем шаге position: relative) и применяем градиенты CSS3 к фону этого нового псевдоэлемента.

Я знаю, все эти числа начинающим дизайнерам кажутся довольно устрашающими. Но они в основном являются значениями RGBA (значениями цвета, к которым мы можем применить непрозрачность) внутри «stop’ов» градиентов. Как бы объяснить, что происходит … у нас есть две половинки градиента, идущего с ВЕРХНЕГО ЛЕВОГО угла к НИЖНЕМУ ПРАВОМУ. Первая половина начинается с полной прозрачности до 50% прозрачного белого. Вторая половина идет обратно к полной прозрачности (вот как создается диагональная линия) и такой и остается.

Заключение

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

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

Автор: Harry Atkins

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

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

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

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

  1. Алексей

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree