Рецепты радиальных градиентов CSS

Рецепты радиальных градиентов CSS

От автора: радиальный градиент CSS — довольно крутая штука. Удивительно, насколько легко с их помощью рисовать фон элемента. Однако легко термин относительный. Это, безусловно, проще, чем создавать графику для фона в стороннем ПО. А синтаксис хорошо запоминается. Его также легко забыть, если не использовать часто, и он сложнее linear-gradient ().

Я решил собрать на одной странице примеры. Поэтому, если вы знаете, что вам нужно, но забыли синтаксис, здесь вы легко найдете пример кода.

Центрированные всплески

Простейший синтаксис помещает первый цвет в центр элемента и второй цвет снаружи:

Тем не менее, так градиент растянется в эллипс на квадратном элементе. Если вам это не нравится, можете превратить фигуру в круг, как показывает второй пример:

Вы также можете контролировать размер, буквально говоря, насколько большой должен быть круг / эллипс (последний цвет будет растягиваться, чтобы покрыть элемент):

С помощью ключевых слов closest-side, farthest-side, closest-corner, farthest-corner

Явно указав radial-gradient(circle 100px, …)

Используя цвета radial-gradient(#56ab2f, #a8e063 150px)

Пример использования:

Позиционированные градиенты

Помимо размера и формы, можно позиционировать центр градиента – еще один большой трюк, который нужно знать в радиальных градиентах.

Это один из недостатков, по моему мнению, генераторов градиентов. Они помогают вам выбирать цвета и т.д. Но обычно они забывают про позиционирование.

Рецепты радиальных градиентов CSS

Центр радиального градиента не должен быть в центре! Например, центр можно расположить в верхнем левом углу:

Все 4 угла:

Можно задать крайне специфичное положение. Ниже приведен пример градиента, расположенного ровно в 195px слева вдоль нижней грани элемента. Он также имеет определенный размер, но в остальном форма эллипса по умолчанию:

Еще одна маленькая вещь, которую нужно знать, заключается в том, что вы можете использовать transparent в градиентах, чтобы выставить цвет позади, если это необходимо, или частично прозрачные цвета, такие как rgba (255, 255, 255, 0,5), чтобы сделать то же самое при раскрашенной цветовой остановке.

Кроме того, радиальные градиенты могут использоваться с несколькими фонами, применяя несколько из них к одному элементу, даже перекрывая друг друга!

Чтобы подчеркнуть идею о том, что центр градиента может быть где угодно, я создал демо, где градиент двигается за курсором:

Люди, как правило, думают о поддержке в браузерах, и это справедливо, но в этом случае не слишком сильно об этом думайте. Поддержка почти полная даже без префиксов.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: