repeating-radial-gradient() в CSS


Содержание

Про CSS

Радиальные градиенты

Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.

Для самого простого градиента достаточно задать только цвета:

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

Помимо цветов градиенту можно задавать форму, положение и размер. Параметры сочетаются и ведут себя сложнее, чем в линейных градиентах.

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle .

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Положение определяет где будет расположен центр градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at : at top , at right , at bottom , at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения:

Код первого квадрата:

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .

Размер определяет размеры конечной фигуры градиента. Для эллиптических градиентов значения можно задавать в процентах, для круглых — нет.

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента. farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента. closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы. farthest-corner — аналогично closest-corner , только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:

Радиальный градиент также может быть повторяющимся — это repeating-radial-gradient .

Как и в случае с линейным градиентом, повторяющийся градиент не очень аккуратно отрисовывается.

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

See the Pen Rounds by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Если при создании узоров использовать относительные единицы ( em , % ), а не абсоюлютные ( px ), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )

Функция repeating-radial-gradient()CSS3-генератор ☛

По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис. Но цвета градиента бесконечно повторяются во всех направлениях образуя узор, заполняющий фон элемента.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.

  • top left = left top = 0% 0% (в левом верхнем углу);
  • top = top center = center top = 50% 0% (по центру вверху);
  • right top = top right = 100% 0% (в правом верхнем углу);
  • left = left center = center left = 0% 50% (по левому краю и по центру);
  • center = center center = 50% 50% (по центру) — это значение по умолчанию;
  • right = right center = center right = 100% 50% (по правому краю и по центру);
  • bottom left = left bottom = 0% 100% (в левом нижнем углу);
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу);
  • bottom right = right bottom = 100% 100% (в правом нижнем углу).

Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.

Табл. 1. Ключевые слова для изменения размера градиента

background: radial-gradient(circle closest-side at 30px 20px, #fff, #000);

background: radial-gradient( closest-side at 30px 20px, #fff, #000);

background: radial-gradient(circle closest-corner at 30px 20px , #fff, #000);

background: radial-gradient( closest-corner at 30px 20px , #fff, #000);

background: radial-gradient(circle farthest-side at 30px 20px , #fff, #000);

background: radial-gradient( farthest-side at 30px 20px , #fff, #000);

background: radial-gradient(circle farthest-corner at 30px 20px , #fff, #000);

background: radial-gradient( farthest-corner at 30px 20px , #fff, #000);

Значение Код Описание Вид
closest-side Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса).
closest-corner Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
farthest-side Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока.
farthest-corner Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,
Пример

Результат данного примера показан на рис. 1.

Рис. 1. Использование repeating-radial-gradient() для создания фона

Примечание

Chrome до версии 26, Safari до версии 6.1 и Andro >-webkit-repeating-radial-gradient() .

Opera до версии 12.10 поддерживает -o-repeating-radial-gradient() .

Firefox до версии 16 поддерживает -moz-repeating-radial-gradient() .

Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.

Спецификация ?

Спецификация Статус
CSS Image Values and Replaced Content Module Level 3 Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 10 26 11.10 12.10 5.1 6.1 3.6 16
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 4.4 1 16 12 6.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Функция repeating-linear-gradient

Функция repeating-linear-gradient задает повторяющийся линейный градиент. Это значит, что мы задаем определенный узор градиента, например, от 0px до 10px — градиент от красного к голубому и этот градиент будет повторяться на весь блок: 0px до 10px, от 10px до 20px, от 20px до 30px и так далее.

Данная функция применяется к свойствам, которые задают картинку фона: background, background-image или картинку границы: border-image, background-image-source.

Синтаксис

Значения

Значение Описание
направление Задает определенное направление градиента в любых единицах для углов либо ключевыми словами top, left, right, bottom или их комбинацией: top left, top right и так далее. Порядок слов не важен: можно писать top left и left top, разницы нет. Параметр необязательный: если его не написать, градиент будет идти сверху вниз (как при to top). Перед направлением ставится слово to.
угол Угол в любых единицах для углов. Может быть положительным или отрицательным. Параметр необязательный. Одновременно может быть задан или угол, или направление (или вообще ничего).
цвет1 Начальный цвет градиента в любых единицах для цвета.
цвет2 Конечный цвет градиента в любых единицах для цвета.
размер Задает протяженность определенного цвета градиента в любых единицах для размера.

Пример . Самый простой вариант

Градиент будет выглядеть так: от 0px до 20px чистый красный цвет, от 20px до 40px — градиент от красного к голубому. И так будет повторяться сверху вниз (на то он и повторяющийся градиент):

CSS-градиенты

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

Использование градиентов, объявляемых в CSS, вместо файлов изображений, позитивно сказывается на управлении и производительности.

Как правило, градиенты — это переходы одного цвета в другой, но в CSS вы можете контролировать каждый аспект того, как это происходит, от направлений перехода цветов (так, как вы захотите) до того, где этот переход цветов осуществляется.

Давайте рассмотрим все по порядку.

Градиенты — это изображения фона

Объявляя применение в CSS сплошного цвета для параметра background-color , градиенты используют background-image . Это дает нам несколько преимуществ, которые можно использовать позже.

Значение параметра background указывает на то, что вы хотите сделать, когда объявляете то или другое действие:

Линейный градиент

Возможно, одним из самых распространенных и полезных типов градиента является linear-gradient() . « Ось » перехода градиента может располагаться слева-направо, сверху-вниз или под любым другим углом на ваше усмотрение.

Если вы не объявляете отдельно угол, по умолчанию преобразования будут происходить сверху-вниз:

Посмотреть пример на Codepen

Вместо разделенных запятыми цветов вы можете использовать те типы цветов, которые вы обычно используете: шестнадцатеричные числа, название цвета, rgba , hsla , и т.д.

Чтобы сделать переход слева-направо, вы задаете дополнительный параметр в начале функции linear-gradient() , начиная код параметра со слова « to », а затем указывая направление.

Например, « to right »:

Посмотреть пример на Codepen

Данный синтаксис « to » применяется для углов переходов. Например, если вы хотите, чтобы ось градиента начиналась в левом нижнем углу и переходила к верхнему правому углу, можно указать « to top right »:

Посмотреть пример на Codepen

Если область перехода имеет квадратную форму, то угол градиента составит 45 градусов, однако если форма не квадратная, то такого угла не будет.

Если вы хотите задать градиент точно в 45 градусов, то вы можете объявить это:

Также вы можете не ограничиваться всего двумя цветами. На самом деле вы можете использовать столько цветов, сколько захотите.

Посмотреть пример на Codepen

Вы можете также объявить, откуда вы хотите, чтобы начинался какой-либо определенный цвет. Это называется « color-stop ».

Допустим, вы хотели бы, чтобы желтый цвет занимал большую часть пространства, а красного было только немного в начале.

В таком случае вы можете разместить color-stop желтого цвета несколько раньше:

Посмотреть пример на Codepen

Как правило, градиенты используются для плавного перехода цветов, однако если у вас есть два одинаковых color stops , вы можете сделать мгновенный переход от одного сплошного цвета к другому.

Это может быть полезно для объявления фона, который имитирует столбцы, на всю высоту страницы:

Посмотреть пример на Codepen

Поддержка браузерами / Префиксы

До сих пор мы рассматривали только новый синтаксис, но тема CSS градиентов включает в себя и другие аспекты.

Например, поддержка браузерами. Здесь синтаксис и префиксы уже сложнее. Существует три разных набора правил синтаксиса, которые поддерживают браузеры.

Они не декларируют этого официально, но вот как вы можете себе их представить:

  • Старый : оригинальный, только с WebKit , в нем используется синтаксис наподобие from() и color-stop() ;
  • Tweener : старая система углов, например, « left »;
  • Новый : Новая система углов, например, « to right ».

То же касается и префиксов.

Давайте попробуем их перечислить:

Chrome 1-9: Старый, с префиксами.
10-25: Tweener, с префиксами.
26: Новый, без префиксов.
Safari 3-: Не поддерживаются.
4-5.0: Старый, с префиксами.
5.1-6.0: Tweener, с префиксами.
6.1: Новый, без префиксов.
Firefox 3.5-: Не поддерживаются.
3.6-15: Tweener, с префиксами.
16: Новый, без префиксов.
Opera 11.0-: Не поддерживаются.
11.1-11.5: Tweener, с префиксами, только линейные.
11.6-12: Tweener, с префиксами, добавлены радиальные.
12.1: Tweener, без префиксов.
15: Новый, без префиксов.
IE 8-: Не поддерживаются.
9: Только фильтры.
10+: Новый, без префиксов (также поддерживается префикс Tweener w/).
Android 2.0-: Не поддерживаются.
2.1-3.0: Tweener, с префиксами.
4.0-4.3: Новый, с префиксами.
4.4+: Новый, без префиксов.
iOS 3-: Не поддерживаются.
3.2-4.3: Tweener, с префиксами.
5.0-6.1: Новый, с префиксами.
7.0: Новый, без префиксов.

Тут существуют некоторые накладки. Например, если браузер поддерживает новый синтаксис, он, как правило, также поддерживает и старые синтаксисы, в том числе и префиксы.

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

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

Это ужасно большое нагромождение кодов. Добавлять их все вручную чревато большим количеством ошибок и, в любом случае, отнимет много времени.

Autoprefixer позволит уменьшить объем ручной работы, а также сократить количество кодов, исходя из того для поддержки каких браузеров вы захотите оптимизировать градиенты.

Примеси Compass помогут перевести SVG -данные в URI под IE 9 , если это для вас существенно.

Фильтры IE

Internet Explorer (IE) 6-9 не поддерживает синтаксис CSS градиентов, однако предлагает программный способ задать градиенты фона:

Существует несколько критериев относительно того, применять вам фильтры или нет:

  1. Считается, что filter негативно влияют на производительность;
  2. background-image накладывается поверх фильтров, так что если вы хотите использовать его как запасной вариант, применение фильтров противопоказано. Однако если сплошной цвет является резервным вариантом ( background-color ), использование фильтров приемлемо.

Даже с учетом того, что фильтры работают только с шестнадцатеричными значениями, вы все равно можете получить альфа-прозрачность соотнеся шестнадцатеричное значение со значение прозрачности от 00 (0%) до FF (100%).

RGBA ( 92,47,90,1 ) == # FF5C2F5A
RGBA ( 92,47,90,0 ) == # 005C2F5A

Радиальные градиенты

Радиальные градиенты отличаются от линейных тем, что переход цветов начинается в одной точке и исходит наружу.

Градиенты часто используются для имитации эффекта освещения, при котором, как мы знаем, свет не всегда равномерно освещает объекты, так что они могут быть полезны, чтобы создать градиент, который будет казаться естественным цветом объекта.

По умолчанию первый цвет используется для начала перехода (в центре элемента), затем он переходит в конечный цвет по краям элемента.

Переход осуществляется равномерно независимо от направления:

Посмотреть пример на Codepen

Вот как градиент задает эллиптическую форму, когда элемент не имеет квадратной формы.

Это по умолчанию ( ellipse по умолчанию задается в качестве первого параметра), но если вы хотите чтобы градиент создавал круг, мы можем задать это отдельно:

Обратите внимание, что данный круговой градиент переходит в конечный цвет на дальней стороне элемента (если элемент имеет прямоугольную форму).

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

Для этого в первом параметре мы через пробел задаем « closest-side »:

Посмотреть пример на Codepen

Также могут задаваться значения: closest-corner (ближайший угол), closest-side (ближайший край), farthest-corner (самый дальний угол), farthest-side (самый дальний край).

Вы можете представить себе это так: « Я хочу, чтобы радиальный градиент переходил из центральной точки в __________ , и везде цвет распределялся сообразно этому ».

Радиальный градиент не обязательно должен начинаться в центре, вы можете задать центральную точку преобразований, указав ее с помощью « at ______ » в первом параметре:

Здесь я сделал это более наглядно, подготовив пример с квадратом и настроив точки color-stop :

Посмотреть пример на Codepen

Здесь в значительной степени все так же, как в случае с linear-gradient() , за исключением очень старых версий браузера Opera, которые поддерживают только линейные градиенты, но не радиальные.

Аналогично синтаксис radial-gradient() претерпел несколько изменений. Здесь также существует три набора: « Старый », « Tweener » и « Новый »:

Их отличительными чертами являются:

  • Старый : с префиксами использует -webkit- , синтаксис типа from() и color-stop() ;
  • Tweener : Первый параметр в нем определяет центр градиента. Это полностью сломает структуру в новых браузерах, поддерживающих синтаксис без префикса, поэтому проверяйте, чтобы все префиксы синтаксиса Tweener были расставлены;
  • Новый : первый параметр имеет синтаксис типа « circle closest-corner at top right «.

Опять же, я всегда обрабатываю код с помощью Autoprefixer . Вы пишете код в соответствии с новейшим синтаксисом, он делает резервные варианты.

Радиальные градиенты более гибкие, чем линейные, поэтому я рекомендую вам просто освоить новейший синтаксис и следовать ему (в крайнем случае, старый синтаксис можно не учитывать).

Повторяющиеся градиенты

Повторяющиеся градиенты имеют более слабую поддержку браузерами . Они представляют собой смесь линейных и радиальных градиентов.

В веб-дизайне существует такой трюк. Берется неповторяющийся градиент. С его помощью создается небольшой фрагмент, он стыкуется с таким же небольшим фрагментом, копией самого себя.

И в результате из таких прямоугольников выстраивается узор. По сути, вы создаете один небольшой прямоугольник и задаете background-size . С помощью подобного подхода легко создавать узоры полос, которые вы можете разворачивать в любую сторону.

С помощью repeating-linear-gradient() , вам не нужно прибегать к таким хитростям.

Размер градиента определяется окончательным color stop . Если размер color stop 20 пикселей, то размером градиента (который затем повторяется) будет квадрат 20 на 20 пикселей:

Посмотреть пример на Codepen

То же самое касается радиальных градиентов:

Посмотреть пример на Codepen

Некорректная резервная загрузка

Как мы уже упоминали, некоторые очень старые браузеры вовсе не поддерживают CSS-синтаксис градиентов. Если вам нужен запасной вариант, который бы работал, как замена градиентам, здесь можно применить изображение ( .jpg/ .png ).

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

Тогда они будут отсылать HTTP-запрос к изображению, даже если мог быть использован CSS-градиент.

Так происходит с Firefox 3.5.8 ( скриншот ), а также с Google Chrome ниже 5 версии и Safari 5.0.1 :

Отказ загрузки Safari 5.0.1

Правда на сегодняшний день это уже не является серьезной проблемой. Единственные браузеры, в которых наблюдались такие трудности, это Google Chrome и Safari . В Chrome это исправлено в версии 6, в Safari — в версии 5,1, которые вышли три года назад.

Данная публикация представляет собой перевод статьи « CSS Gradients » , подготовленной дружной командой проекта Интернет-технологии.ру

Подборка любимых градиентов

by Andrej — Category Обзоры on 24/08/2020

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

  • Что такое градиент?
  • Форма записи градиентов в css
  • Написание цвета градиентов
  • Градиенты с изображениями
  • Градиент для текста
  • Сайты-генераторы градиентов

Сегодня мало кто не знает, что такое градиент, но для галочки, давайте вспомним.

Что такое градиент?

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наибольшего возрастания некоторой величины <\displaystyle \varphi >\varphi , значение которой меняется от одной точки пространства
к другой (скалярного поля), а по величине (модулю) равный скорости роста этой величины в этом направлении

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

Исходя из этого, давайте посмотрим на пример.

Способ записи градиентов в css

Градиент может быть записан двумя способами:

Какой способ записи использовать — решать вам.

Возвращаемся к примеру. В нем мы указали три значения свойств background :

  • 1. Каким будет градиент — linear-gradient — в данном случае он линейный. В дальнейшем в статье мы будем говорить именно о нем.
  • 2. Указали угол наклона градиентной линии, который показывает направление градиента. Указывать направление можно двумя способами: [ | to ] , где угол измеряется в deg, то есть — градус, или вторым способом
    — указанием позиции от и до. Например, to top , to right , to bottom left и т.д.
  • Значение цвета #****** , которым будет начинаться и заканчиваться градиент.

Написание цвета градиентов

Цвет градиента может быть записан любым доступным обозначением:

  • Hex Color Code — #000000 или сокращением #000;
  • RGB Color Code — rgb(0, 0, 0);
  • Color Name — black;
  • HSL Color Code — hsl(0, 0%, 0%);

Вы также можете указывать цвета в процентном соотношении, добавив после цвета %. Например, rgb(0, 0, 0) 0%, rgb(255,255,255) 100%.

Вот собственно и все базовые знания, необходимые для использования градиентов.

Градиенты с изображениями

Для записи комбинированного градиента, с картинкой в качестве фона, можно использовать и другие свойства background.

Давайте посмотрим на пример.

В нем мы создали градиентный фон (код 1) и добавили изображение, с наложенным на него градиентом (код 2).

Градиент для текста

Иногда хочется сделать текст ссылки или заголовка более ярким, заметным и/или заменить обычный текст на какую-нибудь картинку. CSS позволяет нам это сделать, используя следующие свойства:

Главное помните, что некоторые свойства поддерживаются не всеми версиями браузеров. Проверить совместимость можно на сайте Can I use

Объединение градиентов CSS в режиме Background Blend Mode


Совсем недавно появились еще три новых свойства CSS, которые получили довольно хорошую поддержку в современных браузерах. Эти свойства включают:

  • background-blend-mode, для смешивания фоновых изображений, градиентов и цветов фона
  • mix-blend-mode, для смешивания элементов над другими элементами и, наконец,
  • isolation, менее используемое свойство, применяется в режиме mix-blend, для смешивания элементов.

Давайте немного поговорим о первом. Такие функции, как linear-gradient(), radial-gradient(), и repeating-linear-gradient(), repeating-radial-gradient() и другие разновидности имеют широкую поддержку и более стандартизированный
синтаксис во всех современных браузерах. Однако, свойство background также может включать в себя более одного градиента, причем каждая функция разделяется запятой. Lea Verou продемонстрировала впечатляющие модели— паттерны, которые могут быть созданы с помощью этой техники: от шахматных досок, до кирпичей, до звезд. Но теперь, когда у нас есть свойство background-blend-mode, мы можем создать новые градиенты и шаблоны. Примеры ниже.

Спектральный фон

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

И вот у нас уже получился разноцветный фон. Создание подобного эффекта ранее было возможно только с изображением, вес которого составлял бы десятки килобайт. Но мы только
что воспроизвели этот эффект через CSS менее чем на 200 байт, не говоря уже о сохранении HTTP-запроса.

Создаем плед на css

Мы также можем создать интересные шаблоны с градиентами при помощи background-blend-mode.

В итоге вот что у нас получилось,

Фон сайта с кружочками

Как насчет еще одного, на этот раз с радиальным градиентом:

Результат превосходит все ожидания,

Эффект ночного видения

Давайте теперь попробуем воссоздать еще один эффект с режимами смешивания CSS и сделать фотографию, как будто мы просматриваем ее через объектив очков ночного видения. Возьмем обычное изображение и наложим на него радиальный градиент и градиент, который мы использовали при создании пледа — repeating-linear-gradient

И вот результат:

Градиент для border через border-image

Давайте создадим пустой div и сделаем ему градиентную рамку.

Как вы видите, у блока появилась цветная рамка, однако, цвет у нее один. Давайте добавим градиент.

В итоге наш блок будет выглядеть вот так:

Сайты-генераторы градиентов

Здесь небольшая подборка сайтов, позволяющих генерировать градиенты, делать из них canvas, png и svg форматы и копировать для установки в проекты.

И напоследок, хочу поделиться с вами своей подборкой градиентов, которые мне очень нравятся и которые я применяю в различных проектах и при разработке сайтов.

Всем удачи и приятного творчества. Пишите в комментариях свои любимые градиенты.

Возможно Вас также заинтересует…

Уважаемые дизайнеры, программисты и разработчики! У меня лежат два инвайта на Dribbble. К сожалению, сейчас…

В разработке интернет-проектов, как и в промышленности активно используется термин ЧПУ. Однако здесь он не…

Привет, дорогие читатели! Эта статья может пригодиться веб-мастерам, использующим в работе JSFiddle. В ней я…

Изготовление сайта — это еще не гарант привлечения посетителей. И даже если привлечь их получится,…

-moz-repeating-radial-gradient

The CSS -moz-repeating-radial-gradient Mozilla extension property value works similarly to the standard radial gradients as described by -moz-radial-gradient , but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop’s position and the first one’s position.

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background . You specify a gradient value instead of an image URL.

repeating-radial-gradient()

With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition.

As with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Usage note: Because s belong to the data type, they can only be used where s can be used. For this reason, repeating-radial-gradient() won’t work on background-color and other properties that use the CSS data type represents a color in the sRGB color space. A color can be described in any of the following ways:»> data type.

Syntax

Values

value does not need to be inside the element’s box.»>

The position of the gradient, interpreted in the same way as background-position or transform-origin . If unspecified, it defaults to center . CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in rotate and skew transform values.»> The angle of the gradient line, which extends from the starting point at this angle. If unspecified, it defaults to 0deg . CSS data type defines the specific form (shape) of a region. The region determines the part of an element to which a given property, such as clip, applies.»> The gradient’s shape. The value can be circle (meaning that the gradient’s shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse . A keyword describing how big the ending shape must be. The possible values are:

Keyword Description
closest-side The gradient’s ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner The gradient’s ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-side Similar to closest-side , except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner The gradient’s ending shape is sized so that it exactly meets the farthest corner of the box from its center.

Note: Early implementations of this function included other keywords ( cover and contain ) as synonyms of the standard farthest-corner and closest-side , respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

values, often to define a size as relative to its parent object. Numerous properties can use percentages, such as width, margin, padding, and font-size.»>

or a CSS data type represents a distance value. Many CSS properties take values, such as width, margin, padding, font-size, border-width, text-shadow, and many others.»> along the gradient’s axis). A percentage of 0% , or a length of 0 , represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray.

Formal syntax

Examples

Radial gradients run along an axis. At each end point of the axis, a radius is specified. This can be imagined as creating two «circles», where for each circle the center is specified by the point and the radius is specified by the radius length. The gradient runs outwards from the circumference of the inner circle to the circumference of the outer circle.

CSS3 с погружением

CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

Кроме того, меня интересовала поддержка CSS3 на мобильных платформах, неизученные возможности CSS3, а также генераторы, которые создают кроссбраузерный код. Я попробовал восполнить некоторые пробелы и собрать полезную информацию для тех, кто еще только готовится к погружению.

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

Linear-gradient

На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.
div <
background-color: #444444;
background-image: -webkit-gradient (linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient (top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-linear-gradient (top, #444444, #999999); /* Firefox 3.6+ */
background-image: -ms-linear-gradient (top, #444444, #999999); /* IE 10+ */
background-image: -o-linear-gradient (top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient (to bottom, #444444, #999999);
>

Кроме указания начального и конечного цветов, градиенты позволяют изменять угол наклона, позицию начала и завершения цветового перехода, количество цветов и направление градиента.

У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.

Все возможности градиентов поддерживаются теми браузерами, которые могут отображать CSS3 градиенты, даже если некоторые генераторы предлагают нам только переход между двумя цветами.

Repeating-linear-gradient

Позволяет повторять градиент, дает возможность создавать фоновые паттерны.

div <
background-color: #444444;
background-image: -webkit-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Firefox 3.6+ */
background-image: -ms-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* IE 10+ */
background-image: -o-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Opera 11.10+ */
background-image: repeating-linear-gradient (top, #444444 18%, #999999 25%);
>

Radial-gradient

Круговой градиент. Так же можно иметь несколько цветовых переходов, можно определять точку начала градиента (не обязательно из центра круга).

div <
background: #444444;
background: -webkit-gradient (radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
background: -webkit-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background: -moz-radial-gradient (center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */
background: -o-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */
background: -ms-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */
background: radial-gradient (center, ellipse cover, #444444 0%,#999999 100%);
>

Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.

Инструменты:

  1. gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
  2. www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
  3. lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.

Множественные фоны

Не стоит забывать о браузерах, не поддерживающих множественные фоны.

Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.

Border-radius

Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.

div <
-webkit-border-radius : 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius : 12px; /* Firefox 1-3.6 */
border-radius : 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome , Firefox 4+, iOS 4+, Android 2.1+ */
>

Все производители уже отказались от вендорных префиксов в последних версиях браузеров.

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

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

div <
-moz-border-radius : 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
border-radius : 15px 30px 45px 60px;
>

Интересной возможностью является передача пар значений радиусов для каждого угла. Так можно добиться более сложных форм, чем просто закругления:

div <
border-top-left-radius : 5px 30px;
border-top-right-radius : 30px 60px;
border-bottom-left-radius : 80px 40px;
border-bottom-right-radius : 40px 100px;
>

Если все одинковы:

div <
border-radius : 8px / 13px;
>

Инструменты:
  1. css3please.com генерирует множество всего.
  2. border-radius.com специализированный генератор закругленных углов. Удобно делать углы разного разиуса.
  3. css3generator.com генерирует много всего. Для уголков дает возможность выбора между одинаковым радиусом и разными.
  4. layerstyles.org/builder.html имитирует интерфейс Фотошопа. Удобно генерировать не только уголки.

Box-shadow

Падающие тени от блоков.

div <
-webkit-box-shadow : 0px 0px 4px #000000; /* Safari 3-4, iOS 4.0.2-4.2, Android 2.3+ */
-moz-box-shadow : 0px 0px 4px #000000; /* Firefox 3.5-3.6 */
box-shadow : 0px 0px 4px #000000; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+, iOS 5+ */
>

Тени можно направить вовнутрь элемента
div <
-webkit-box-shadow : inset 6px 6px 12px #000000;
-moz-box-shadow : inset 6px 6px 12px #000000;
box-shadow : inset 6px 6px 12px #000000;
>

Можно применить сразу несколько теней к одному элементу.
div <
-webkit-box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
-moz-box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
box-shadow : inset 6px 6px 12px #000000, 4px 6px 3px #dddddd;
>

Еще одним мало используемым значением является spread-radius, для изменения которого нужно просто добавить его сразу после значения размытия тени. Положительное значение увеличивает тень, отрицательное значение сделает размеры тени меньше размера блока, от которого тень падает.

div <
-webkit-box-shadow : 0 5px 5px -6px #000000;
-moz-box-shadow : 0 5px 5px -6px #000000;
box-shadow : inset 0 5px 5px -6px #000000;
>

Внутренние тени, множественные тени и spread-radius можно применять во всех браузерах, которые поддерживают простые CSS3 тени.

Практически все производители уже отказались от вендорных префиксов в последних версиях браузеров.

Инструменты:

  1. css3maker.com многофункциональный генератор. Можно делать внутренние тени, менять цвета.
  2. www.css3.me все настройки можно раскрывать по мере необходимости
  3. css3generator.com можно сразу настроить цвет тени в RGBA

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

div <
background: rgb(200, 54, 54);
background: rgba(200, 54, 54, 0.5) ; /* Firefox 3+, Chrome , Safari 3+, Opera 10.10+, IE 9+, iOS 3.2+, Android 2.1+ */
>

Для кроссбраузерности стоит указать цвет без альфа-прозрачности, либо путь к прозрачному PHG.

Существующий формат записи HSLA можно использовать в тех же версиях браузеров, которые поддерживаю RGBA.

Инструменты:

Псевдоэлементы

Генерация контента в CSS через :before/:after. Используется как для добавления символов и целых слов в документ, так и для создания новых блоков, которые можно использовать для оформления.

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

Интересно, что CSS3 требует применения синтаксиса с двумя двоеточиями (::before / ::after) но IE8 требует использования псевдоэлементов с одним двоеточием.

Заключение

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

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

Источники информации о поддержке свойств браузерами

upd Для желающих автоматизировать процесс создания префиксов написана другая статья.

And for those of you who don’t speak Russian, this article in English.

Про CSS

Радиальные градиенты

Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.

Для самого простого градиента достаточно задать только цвета:

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

Помимо цветов градиенту можно задавать форму, положение и размер. Параметры сочетаются и ведут себя сложнее, чем в линейных градиентах.

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle .

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Положение определяет где будет расположен центр градиента. Используются те же ключевые слова, что и для линейного градиента, но с приставкой at : at top , at right , at bottom , at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения:

Код первого квадрата:

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .

Размер определяет размеры конечной фигуры градиента. Для эллиптических градиентов значения можно задавать в процентах, для круглых — нет.

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента. farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента. closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы. farthest-corner — аналогично closest-corner , только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:

Радиальный градиент также может быть повторяющимся — это repeating-radial-gradient .

Как и в случае с линейным градиентом, повторяющийся градиент не очень аккуратно отрисовывается.

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

See the Pen Rounds by yoksel (@yoksel) on CodePen.

See the Pen Circles by yoksel (@yoksel) on CodePen.

Если при создании узоров использовать относительные единицы ( em , % ), а не абсоюлютные ( px ), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )

СSS3 Градиент

CSS3 градиенты позволяют отображать плавные переходы между двумя или более указанными цветами.

CSS3 определяет два типа градиентов:

  • Линейные градиенты (вниз/вверх/влево/вправо/по диагонали)
  • Радиальные градиенты (определяются по центру)

CSS3 Линейные градиенты

Для создания линейного градиента необходимо определить по крайней мере, два цвета. Остановки цвета — это цвета, которые вы хотите отобразить плавными переходами. Можно также задать начальную точку и направление (от угола) вдоль с эффектом градиента.

Синтаксис

Линейный градиент — сверху вниз (по умолчанию)

В следующем примере показан линейный градиент, начинающийся сверху. Он начинает красный, переход к желтому:

Пример

Линейный градиент — слева направо

В следующем примере показан линейный градиент, начинающийся слева. Он начинает красный, переходит в желтый:

Пример

Линейный градиент — по диагонали

Вы можете сделать градиент по диагонали, указав как горизонтальное, так и вертикальное начальное положение.

В следующем примере показан линейный градиент, который начинается в левом верхнем углу (и идет в нижний правый угол). Он начинается красным, переход к желтому:

Пример

Использование углов

Если вы хотите больше контроля над направлением градиента, вы можете определить угол, вместо предопределенных направлений (снизу, сверху, справа, слева, снизу справа и т. д.).

Синтаксис

Угол определяется, как угол между горизонтальной линией и линией градиента.

В следующем примере показано, как использовать углы для линейных градиентов:

Пример

Использование нескольких цветов

В следующем примере показан линейный градиент (сверху-вниз) внесколько цветовых стоков:

Пример

В следующем примере показано, как создать линейный градиент (слева-направо) с цветом радуги и текстом:

Пример

Использование прозрачности

Градиенты CSS3, также поддерживают прозрачность, которую можно использовать для создания эффектов затухания.

Чтобы добавить прозрачность, мы используем функцию rgba() для определения цветовых стопов. Последним параметром в функции rgba() , может быть значение от 0 до 1 , и это определяет прозрачность цвета: 0 означает полную прозрачность, 1 указывает на полный цвет (без прозрачности).

В следующем примере показан линейный градиент, начинающийся слева. Он начинает полно-прозрачным, переходящий к полному красному цвету:

Пример

Повторение линейного градиента

Функция repeating-linear-gradient() используется для повтора линейных градиентов:

Пример

Повторяющийся линейный градиент:

CSS3 Радиальный градиент

Радиальный градиент определяется по центру.

Чтобы создать радиальный градиент, необходимо определить как минимум два цвета.

Синтаксис

По умолчанию форма эллипс, размер, самый дальний угол и положение по центру.

Радиальный градиент — равномерно расположенные остановки цвета (по умолчанию)

В следующем примере показан радиальный градиент равномерного цвета:

Пример

Радиальный градиент — различные цветовые остановки

В следующем примере показан радиальный градиент с различными цветовыми остановками:

Пример

Установить фигуру

Параметр shape определяет фигуру. Может принимать значение circle или ellipse . Значение по умолчанию — ellipse .

В следующем примере показан радиальный градиент с фигурой круга:

Пример

Использование ключевых слов разного размера

Параметр side определяет размер градиента. Он может принимать четыре значения:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Пример

Радиальный градиент с разными ключевыми словами размера:

#grad1 <
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
>

#grad2 <
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
>

Повторение радиального градиента

Функция repeating-radial-gradient() используется для повтора радиальных градиентов:

Илон Маск рекомендует:  Что такое код msql_query
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL