При верстке макета из psd в HTML и CSS может встретиться такая ситуация, когда фоновая заливка какого-либо объекта на макете выполнена в виде градиента.
Напомню, что градиентом называется плавный переход одного цвета в другой. Такой прием часто используется в дизайне для придания большей эффектности внешнему виду сайта.
Во времена CSS2.1 поддержки передачи градиента с помощью стилевых правил не было. Поэтому при верстке выходили из положения путем вырезания части фонового изображения из макета. И затем тиражирования этого изображения, используя правило 1
background-image:url()
1
background-repeat
На сегодняшний день, хотя стандарт CSS3 еше полностью не принят, некоторые из его возможностей активно применяются благодаря поддержке браузеров. Одним из таких свойств является возможность передачи градиента стилевыми правилами.
Но, одно дело знать, как с помощью правил написать градиент в CSS, а другое - как “выбрать” заданный дизайнером градиент из программы Photoshop. Это абсолютно логично - ведь шаблон создается по макету, с масимальной идентичностью ему.
Каким же образом можно узнать, какой градиент был заложен в объект макета? Все достаточно просто. В этом небольшом руководстве будут пройдены последовательные шаги, детально объясняющие все необходимые действия.
К примеру, имеется макет сайта, у которого фоновоя заливка шапки имеет градент. Просто вырезать из нее фоновое изображение и замостить им шапку на html-странице, может было бы и проще. Но это уже прошлый век. К тому же это заметно утяжеляет html-страницу. Мы поступим по другому:
Еще раз внимательно посмотрим на фрагмент макета. Здесь изображена шапка будущего сайта. Хорошо видно, что фоновая заливка выполнена в виде градиента - зеленого цвета, плавно переходящего из одного оттенка в другой снизу вверх (или сверху вниз - это уже как нравиться).
Первое, что необходимо сделать, это открыть слой, отвечающий за прорисовку фонового цвета шапки. Переходим в Панель слоев, находим там такой слой и двойным щелчком мыши открываем его свойства. Появится диалоговое окно, в котором, если для данного объекта установлены какие-либо дополнительные свойства (эффекты), то в списке слева они будут отмечены галочкой. В нашем случае таким свойством будет “Наложение градиента”:
Щелкаем по нему в списке мышкой, если он не открылся автоматически. И переводим взгляд в правую часть окна. Что мы здесь видим и что нам здесь будет надо? В этом окне это три свойства слоя, которые нам понадобятся при написании стилевых правил. Первое - тип градиента. Здесь он линейный. Второе - цвет градиента. И третье - угол наложения градиентной заливки. В данном случае это вертикальный градиент (90 градусов). Все, больше в этом окне нам больше ничего не потребуется, так как мы узнали то, что необходимо:
Однако, ведь это еще не все. Необходимы значения стоп-цветов. То есть, начальный цвет и конечный цвет. С помощью них и создается градиент. Для этого щелкаем мыщью прямо на окошке с цветов градиента в этом же окне. Откроется следующее (вложенное) окно, в котором мы сможет узнать точные значения цветов:
Здесь нам необходима цветовая шкала (выделена рамкой). На ней в наглядном графическом режиме представлен градиент, который используется для заливки шапки макета будущего сайта. Как видно, она представляет из себя цветовую полосу, в начале которой есть один цвет (темно-зеленый), а в конце другой (светло-зеленый). На этой шкале нам потребуются нижние маркеры (отмечены стрелками). С помощью этих маркеров задаются начальный стоп-цвет (крайний левый) и конечный стоп-цвет (крайний правый).
Каким же образом иы узнаем точные значения этих цветов? Все опять просто. Будем последовательны. Наводим куроср мыши на крайний левый маркер и щелкаем по нему. Видим, что сам маркер окрасился в темно-зеленый цвет. А окошко выбора цвета внизу также изменило свой цвет на точно такой же. Это именно тот цвет, который используется в этом градиенте в качестве начального:
Щелкаем на окошке выбора цвета и видим его точное значение. Здесь можно выбрать значение цвета как в rbg, так и в hex - что вы предпочитаете:
Аналогично поступаем с маркером конечного стоп-цвета и получаем точное значение его цвета. Не забываем скопировать значения цветов, чтобы их можно было использовать в дальнейшем:
Теперь мы имеем все данные для того, чтобы создать стилевые правила градиента в CSS3. Приступим к их написанию:
background: linear-gradient(top, #77c531, #4d722d);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
background: -webkit-linear-gradient(top, #77c531, #4d722d);
background: -moz-linear-gradient(top, #77c531, #4d722d);
background: -o-linear-gradient(top, #77c531, #4d722d);
background: -ms-linear-gradient(top, #77c531, #4d722d);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#77c531', endColorstr='#4d722d', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#77c531',endColorstr='#4d722d')";Разберем первую строку:
background: linear-gradient(top, #77c531, #4d722d);Мы хотим (точнее - так задумал дизайнер), чтобы градиент “шел” сверху вниз от светло-зеленого к темно-зеленому. Поэтому в правилах указываем начальную точку отсчета для градиента - 1
top
1
#77c531
1
#4d722d
1
background - linear-gradient
Но данное правило является самым общим. Чтобы на сегодняшний день все браузеры понимали его, ниже мы прописываем почти точно такие же правила, но с учетом специфики каждого из браузеров.
Для браузеров на движке WebKit (Google Chrome, Safari):
background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
background: -webkit-linear-gradient(top, #77c531, #4d722d);Первая строка нужна, чтобы градиент понимал Chrome ниже версии 4. Вторая - для более новых версий. Как видим, синтаксис под движок webkit более громоздок. Разберем его:
- background: -webkit-gradient(linear, 0 0, 0 100%, from(#77c531), to(#4d722d));
- background: -webkit-linear-gradient(top, #77c531, #4d722d);
… указывают, что это градиент линейный. Дальше - 1
0 0, 0 100%
1
top
1
top
1
left top
1
right top
В нашем случае это левый верхний угол. Вторая пара чисел - это положение в процентах конечной точки отсчета. Забыл сказать, что если положение точки отсчета задается в процентах, то первым числом из пары идет значение по горизонтали (ось X), вторым - значение по вертикали (ось Y).
Исходя из этого, можно легко подсчитать, что конечная точка градиента в нашем случае будет в левом нижнем углу, что равнозначно записи - 1
left bottom
1
from(#77c531)
1
to(#4d722d)
Следующие три строки предназначены для браузеров Firefox (префикс 1
-moz
1
-o
1
-ms
Отдельная тема - это версии IE. Здесь без нестандартных приемов не обойтись, иначе градиент просто не будет отображен. Для них применяется фильтр:
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#77c531', endColorstr='#4d722d', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#77c531',endColorstr='#4d722d')";На этом процесс преобразования градиента в Photoshop в CSS-правила можно считать законченным.
P.S.
Забыл упомянуть, что уже довольно давно существуют различные плагины под Photoshop, которые в автоматическом режиме преобразовывают свойства объектов на макете в правила CSS.
Звучит очень заманчиво. Однако, в своей практической работе я еще не сталкивался ни с одним из них. Поэтому поводу мне сказать пока нечего.
На этом все.