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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

.element {
  background: radial-gradient(
 at top left,
 var(--light), var(--dark) /* using variables just for fun! */
  )
}

Все 4 угла:

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

.element {
  background: radial-gradient(
 150px 40px at 195px bottom,
 #666, #222
  );
}

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

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

.element {
  background: 
 radial-gradient(
 circle at top left,
 rgba(255, 255, 255, 0.5), 
 transparent 100px
 ),
 radial-gradient(
 circle at top right,
 rgba(255, 255, 255, 0.5), 
 transparent 100px
 ),
 radial-gradient(
 at bottom left,
 rgba(255, 0, 255, 0.5), 
 transparent 400px
 ),
 radial-gradient(
 at bottom right,
 rgba(255, 100, 100, 0.5), 
 transparent 400px
 );
}

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

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

Автор: Chris Coyier

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree