При верстке макета из 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
, говоря тем самым браузеру, что это линейный градиент. Как видим, в этом правиле мы применили все значения, которые получили из Photoshop.

Но данное правило является самым общим. Чтобы на сегодняшний день все браузеры понимали его, ниже мы прописываем почти точно такие же правила, но с учетом специфики каждого из браузеров.

Для браузеров на движке 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
. Таким образом, мы указали браузеру, что необходимо построить вертикальный градиент, начинающийся в верхней точке и идущий вертикально (90 градусов) вниз до нижней точки. Осталось задать начальный стоп-цвет
1
from(#77c531)
и конечный стоп-цвет
1
to(#4d722d)
.

Следующие три строки предназначены для браузеров Firefox (префикс

1
-moz
), Opera (префикс
1
-o
), IE (префикс
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.

Звучит очень заманчиво. Однако, в своей практической работе я еще не сталкивался ни с одним из них. Поэтому поводу мне сказать пока нечего.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017