Столкнулся с градиентыми переходами на psd-макете. Сразу скажу, что данная статья не претендует на полный и глубокий обзор CSS-градиентов.

Это лишь маленький практический “кусочек”, посвященный тому, как решить поставленную задачу. И еще один момент - вопрос, освященный здесь, не является таким уж сложным. Но первоочередная цель моего скромного сайта - служить записной книжкой для своего владельца. Поэтому все записи здесь можно рассматривать как вехи (milestones) в долгом пути верстальщика.

Пример с градиентным переходом на реальном psd-макете показан ниже:

Градиентный переход на макете

Видим, что имеется градиент, который “растянут” по горизонтали. Начинается он в левой крайней точке, затем имеется плавный переход цвета в центре, и в правой крайней точке снова возврат к прежнему цвету (как в левой крайней точке). Такие переходы оттенков называются цветовыми переходами

1
color stops
.

Ниже приведу наглядную картинку, чтобы было более понятно, о чем идет речь. Взята она с сайта CSS Tricks:

Наглядный пример цветового перехода градиента

Цветовые переходы являются “частью” CSS-свойства

1
gradient
. То есть, если до этого вы привыкли создавать плавные переходы цветов (градиенты) только с помощью двух точек, которые имеют крайние положения -
1
0%
и
1
100%
, то теперь вам нужно освоить такой момент, что градиент можно создать с помощью не только двух, а много больше точек. Такие точки могут находиться не обязательно в крайних положениях, а в любом месте элемента.

Кстати, положение таких точек

1
color stops
можно задавать не только с помощью процентов, но и “жестко”, фиксированными величинами, такими как пиксели
1
px
.

Благодаря множественным цветовым переходам можно создавать красивые эффекты. Пример, показанный в самом начале, является “бледным” отражением того, на что способен CSS3. Другое дело, что на сегодняшний день браузеры поддерживают не все его возможности, но об этом немного ниже.

Итак, вернемся к градиентам на psd-макете. Мы разобрались, что из себя представляет такой цветовой переход. Осталось решить, как воплоить его в коде. Самый простой (надежный), удобный и быстрый способ - это воспользоваться замечательным online-инструментом “ColorZilla”.

Открываем его в браузере и видим изначально такую картину:

Инструмент ColorZilla

В первую очередь нас интересует центральная цветовая полоска, как на картинке вверху. Это своеобразная палитра, на которой мы будем создавать наш собственный градиент. Нижние квадратики - это графическое отображение цветовых переходов

1
color stops
. Можно передвигать их по горизонтали, тем самым изменяя местоположение цветового перехода в градиенте.

Само местоположение можно задать примерно, а можно и точно - в окошке “Location”, где устанавливаются проценты. В самом квадратике отображен цвет, установленный для перехода. При щелчке мыши на нем в окошке “Color” отображается цвет самого перехода. По умолчанию имеется два

1
color stops
(помимо двух крайних), которые можно удалить с помощью кнопки “Delete”.

Берем с помощью пипетки цвета градиентов с psd-макета:

Цветовые переходы на макете Photoshop

и переносим их на online-генератор. Последовательно, слева направо. Для этого выбираем на панельке ColorZilla

1
stop colors
, одинарным щелчком мыши выбираем окошко Color и в диалоговом окне (кстати, очень похожем на такое же в Photoshop) вставляем цвет. В результате получаем необходимый цветовой переход:

Созданный цветовой переход

В окне “Preview” виден готовый результат, а в окне CSS - готовый CSS-код. Его можно скопировать и вставить в свой проект.

Аналогично online-генератору Colorzilla, можно воспользоваться еще одним, подобным - “CSSMatic”:

Online-генератор CSSMatic

Конечно, создавать цветовые переходы с помощью CSS-кода правильно во всех отношениях. Это правильно с точки зрения семантики, с точки зрения стандартов, с точки зрения быстроты загрузки сайта. Есть только одно но - не все браузеры “успевают” за стремительным развитием стандартов. Поэтому в таких браузерах подобные красивости не будут отображаться.

Есть такой замечательный сайт под названием “What can i use” (“Что я могу использовать”), на котором можно проверить, какой браузер и какой версии поддреживает то или иной CSS-свойство. Давайте откроем его и посмотрим, как обстоит дело с нашим градиентным переходом в браузерах:

Поддержка CSS Gradient в браузерах

Видим, что практически во всех он будет отображаться. Кроме одного - Internet Explorer v8 и Internet Explorer v9. Так что пользователи “ослика” не увидят всех красивостей.

На этом краткая статья по градиентам окончена.


Красивая функция trackBy

Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:{% highlight typescript %}public trackByNumber = (_:...… Continue reading

Ubuntu - проблема с KVM Switch

Published on September 12, 2022