От автора: все чаще и чаще мы создаем эффекты, которые обычно делались в графических редакторах, например Adobe Photoshop, применяя один лишь CSS. А последнее время от CSS3 можно добиться дополнительных новых эффектов.
В этом учебнике я собираюсь показать вам, как воссоздать эффект глянцевого изображения с помощью градиентов CSS3.
Структура HTML
Итак, в этом кратком мини-учебнике мы применим структуру основного HTML5. При наименьшем количестве возможных вариантов, так как нужного эффекта следует добиться, в основном пользуясь CSS. Поэтому лучше всего сохранить HTML настолько чистым и семантическим, как только можно.
Итак, помимо страничной структуры и обертки, у нас в основе имеется всего один элемент DIV (с классом photo), в который мы поместили тег IMG.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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.
|
1 2 3 4 5 6 7 8 |
body { background: #EDEFF4; } #wrapper { margin: 30px auto; width: 600px; } |
Назначение стилей DIV-у с фото
Следующим шагом назначаем стили содержащему div’у. Здесь мы определяем высоту и ширину блоку. На данном этапе это самая важная задача, как и задание свойству position значения relative. Все остальное – чисто в эстетических целях. Вроде классной двойной тени блока вокруг всего изображения и рамки в 1px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 к фону этого нового псевдоэлемента.
|
1 2 3 4 5 6 7 8 9 10 11 |
.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
Источник: //www.onextrapixel.com/
Редакция: Команда webformyself.
Комментарии (1)