В прошлом большинство веб-сайтов активно использовали изображения для создания необычного пользовательского интерфейса. Благодаря различным свойствам CSS эта тенденция изменилась. Этот учебник поможет вам узнать о CSS-градиентах. Вы можете использовать градиенты для замены изображений в различных элементах пользовательского интерфейса, а также в фонах. Немного потренировавшись, вы можете создавать сложные узоры без использования одного изображения.
CSS-градиенты, которые имеют отличную поддержку браузера , позволяют создавать плавные визуальные переходы между двумя или более указанными цветами. Градиенты дают вам возможность управлять многими настройками, такими как размер градиента, его угол, положение цветовых ограничителей и т. Д.
В этой статье я расскажу о линейных, радиальных и новых повторяющихся градиентах.
Линейные градиенты
Линейные градиенты являются наиболее часто используемыми градиентами. Выглядит это так: значения в скобках представляют типы значений:
.example {
background: linear-gradient(
[direction], [first-color], [second-color], [more-colors ...]
);
}Если вы не укажете направление, градиент начнется сверху с полной силой первого цвета, а затем плавно перейдет к последнему цвету, когда он достигнет дна.
Для большего контроля вы можете указать направление градиента. Вы можете сделать это, используя простые термины, такие как to leftto bottom right Вот фрагмент кода для создания фона, который идет слева направо:
.example {
background: linear-gradient(to right, hotpink, lightpink);
}
Старые браузеры поддерживают немного другой синтаксис и требуют специфичных для браузера префиксов. В старых браузерах вместо указания конечной точки указывается начальная точка. CSS3 градиентный код для старых браузеров выглядит так:
.example {
background: -prefix-linear-gradient(left, red, blue);
}
Задание углов для линейных градиентов
Если вам нужно создать градиент под определенным углом, вы можете указать его напрямую. Код ниже создает градиент под углом 60 градусов.
.example {
background: linear-gradient(60deg, red, blue);
}
Учитывая, что линия снизу вверх находится под нулевым градусом, угол увеличивается, если линия движется по часовой стрелке. Например:
.example {
background: linear-gradient(0deg, red, blue);
}
Это создаст градиент с красным внизу и синим сверху. В то время как следующее создаст горизонтальный градиент с красным с левой стороны и синим справа:
.example {
background: linear-gradient(90deg, red, blue);
}
Задание цветовых остановок в линейных градиентах
Если вы хотите изменить цвета неравномерно, вы можете указать, что цвет останавливается самостоятельно. Положение цветных остановок может быть указано в процентах или в абсолютной длине. Вам не нужно указывать позицию остановки для первого и последнего цвета. Данный цвет в полной мере соответствует позиции, которую вы указали. Вот пример:
.example {
background: linear-gradient(
to bottom, yellow, red 70%, black
);
}
Если не указано никаких остановок, цвета будут распределены равномерно.
Радиальные градиенты
Радиальные градиенты встречаются реже и сложнее. Это синтаксис для радиальных градиентов:
.example {
background: radial-gradient(
[shape] [size and position], [first-color], [more-colors ...], [last-color]
);
}
Если ничего не указано, фигура по умолчанию — это эллипс, размер — самый дальний угол, а его позиция — центр. Цветовые остановки задаются точно так же, как в линейных градиентах. Следующий фрагмент нарисует радиальный градиент в форме эллипса:
.example {
background: radial-gradient(yellow, red, black);
}
Изменение размера радиального градиента
Размер радиального градиента определяется четырьмя значениями: closest-sidefarthest-sideclosest-cornerfarthest-corner При использовании со значением формы эти ключевые слова определяют форму. Форма градиента работает в предположении, что градиент будет непрерывно бесконечно, за границами элемента, к которому применяется градиент.
Давайте рассмотрим пример, чтобы сделать это более понятным. Мы создадим четыре градиента на четырех элементах:
<div class="gradient1"></div>
<div class="gradient2"></div>
<div class="gradient3"></div>
<div class="gradient4"></div>
В CSS ниже я использую четыре значения ключевых слов:
.gradient1 {
background: radial-gradient(circle farthest-corner, red, black);
}
.gradient2 {
background:
radial-gradient(circle farthest-side, red, black);
}
.gradient3 {
background: radial-gradient(circle closest-side, red, black);
}
.gradient4 {
background: radial-gradient(circle closest-corner, red, black);
}
Обратите внимание, что в каждом градиенте есть небольшая, но заметная разница.
Определение цветовых остановок в радиальных градиентах
Цветовые остановки в радиальных градиентах аналогичны линейным градиентам. Заметьте, что я также указал положение центра круга в процентах. Вы также можете использовать значения пикселей, если хотите. Вот фрагмент кода, чтобы показать это в действии:
.example {
background: radial-gradient(
circle closest-side at 20% 50%, yellow, red 70%, black
);
}
Повторяющиеся градиенты
Повторяющиеся градиенты аналогичны другим градиентам и принимают те же аргументы. Разница лишь в том, что они повторяют цветовые остановки бесконечно. Позиции цветов смещены на кратные длины основного градиента. Как вы увидите, это повторение позволяет нам создавать сложные узоры и фоны.
Стоит помнить, что при использовании нескольких повторяющихся градиентов на одном элементе первый градиент появится сверху. Естественно, это означает, что если каждый цвет первого градиента непрозрачен на 100% (т.е. отсутствует прозрачность), то другие градиенты в стеке не будут видны.
Повторяющиеся линейные градиенты
Чтобы создать базовый повторяющийся линейный градиент , мы можем сделать следующее:
.example {
background: repeating-linear-gradient(
45deg, red, red 5px, white 5px, white 10px
);
}
Чтобы резко изменить цвет, вы должны указать два цвета. Чтобы создать тонкий узор, вам просто нужно добавить еще один градиент так же, как вы сделали бы несколько фоновых изображений:
background:
repeating-linear-gradient(
-45deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2) 5px,
transparent 5px, transparent 10px
),
repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.2),
rgba(255, 0, 0, 0.2) 5px, white 5px, white 10px
);
На этот раз я сделал градиент прозрачным вместо белого. Предлагаю поэкспериментировать с разным положением цветовых стопов и углов.
Повторяющиеся радиальные градиенты
Повторяющиеся радиальные градиенты аналогичны стандартным радиальным градиентам. Вот код для создания простого повторяющегося радиального градиента:
.example {
background: repeating-radial-gradient(
circle, black, black 6px, red 6px, red 10px
);
}
Вы также можете наложить несколько повторяющихся радиальных градиентов, например:
.example {
background:
repeating-radial-gradient(
farthest-corner at 10% 10%, rgba(0, 0, 0, 0.7),
rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
),
repeating-radial-gradient(
closest-corner at 90% 90%,
rgba(0, 0, 0, 0.7), rgba(255, 0, 0, 0.2) 15px,
rgba(255, 0, 0, 0.1) 25px
),
repeating-radial-gradient(
farthest-corner at 10% 90%, rgba(0, 0, 0, 0.7),
rgba(0, 255, 0, 0.2) 15px, rgba(0, 255, 0, 0.1) 25px
);
}
Вывод
В этом уроке я попытался охватить все аспекты CSS-градиентов. Градиенты могут устранить необходимость использования изображений во многих случаях, когда вам нужны простые шаблоны. Конечно, хотя градиенты избегают дополнительных HTTP-запросов изображений, они все же могут вызывать проблемы с производительностью , поэтому их следует использовать с осторожностью.