radial-gradient() в CSS


Содержание

Линейный и радиальный градиент на CSS, как сделать градиент на сайте

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

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

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

Для создания линейного градиента существует значение linear-gradient, для радиального radial-gradient. Кроме того, существуют две функции для повтора градиента repeating-linear-gradient и repeating-radial-gradient. Отдельного свойства для добавления градиента не предусмотрено, он считается фоновым изображением, поэтому добавляется через свойства:

  • background,
  • background-image,
  • border-image,
  • list-style-image.

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

Для указания позиции вначале пишется to, а затем добавляются ключевые слова top, bottom, left, right и их сочетания, порядок слов не важен. Также, вместо ключевого слова можно задавать угол наклона градиентной линии, показывающий направление градиента. Сначала пишется положительное или отрицательное значение угла, после чего к нему добавляется deg, пример — 30deg.

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

Что касается радиальных градиентов, то они похожи на линейные градиенты. Чем отличаются линейный и радиальный градиент? Тем, что в радиальных один цвет переходит в другой словно круги по воде вокруг точки, а не вдоль прямой линии. Есть две формы радиального градиента: circle (круг) и ellipse (эллипс). Они различаются внешним видом, по умолчанию используется форма эллипс. Также с формой градиента можно задать и его размер, зависящий от применяемых ключевых слов — размер указывается через пробел после формы градиента.

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

Таким образом, создать градиент с помощью CSS может каждый. При помощи градиентов можно делать уникальные элементы на сайте, например, при помощи градиентов и свойства background-size можно получить различные фоновые картинки без использования изображений. Но самому разрабатывать градиенты может быть не очень удобно, поэтому в сети есть готовые сервисы для генерации кода градиентов.

CSS: Радиальный градиент для фона

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

Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:

  • В качестве первого аргумента указываются ключевые слова и/или единицы измерения CSS, определяющие конечную форму, размер и начальное расположение градиента. Необязательный аргумент.
  • Разделяемый запятыми список, состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.

Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:

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

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

По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если вы указываете только одно ключевое слово, второе будет «center».
x% y% Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%.
x-pos y-pos Первое значение это горизонтальная позиция, второе — вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения.

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

Размер градиента (на сколько большой должна быть конечная форма градиента), можно определить с помощью одного из четырёх ключевых словосочетаний или указания радиуса с помощью единиц измерения CSS (для определения радиуса нельзя использовать проценты).

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

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

Radial-gradient() в CSS

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

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

Для Webkitбраузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

Примечание: В старых версиях Webkit-браузеров использовался немного другой синтаксис, первым параметром там указывался тип градиента.

Для Firefox 3.6+:

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

Для Internet Explorer

Градиент для IE 10+

Этот фильтр будет работать в старых версиях IE:

Кроссбраузерный CSS-градиент:

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

background : #999 ; /* for non-css3 browsers */

filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#cccccc’ , endColorstr = ‘#000000’ ) ; /* для IE6-9 */
background : -webkit-linear-gradient ( top , bottom , #ccc , #000 ) ; /* для webkit-браузеров */
background : -moz-linear-gradient ( top , #ccc , #000 ) ; /* для firefox 3.6+ */
background : -o-linear-gradient ( top , #ccc , #000 ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #ccc , #000 ) ; /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

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

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

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

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

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

  • closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain — тоже что и closest-side.
  • cover — тоже что и farthest-corner.
Илон Маск рекомендует:  Функции форматирования

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3: CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Заключение.

Пожалуйста отметьте, что не все браузеры поддерживают CSS-градиент. Чтобы не возникло проблем, Вы не должны целиком полагаться на CSS-градиент, верстая шаблон.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Градиент CSS3. Примеры использования

Приветствую вас, дорогие друзья!

Хотите узнать как легко и быстро создать красивый градиент CSS3 на вашем сайте? Причём данный градиент можно будет настраивать под любой дизайн.
Давайте я покажу вам несколько примеров и увидите что это действительно просто.


Как создаётся линейный градиент CSS3

Линейный градиент это когда цвета представлены в виде прямой линии плавно и равномерно переходят один в другой.
Для создания линейного градиента при помощи CSS3 давайте создадим блок с классом «gradient-block»

Теперь при помощи CSS зададим для этого блока ширину, высоту и границу

Далее для данного блока я задам ещё один класс и уже для него буду задавать разные градиенты. Вы можете задавать градиент для класса основного блока, так как большой роли это не играет.
В итоге код блока будет выглядеть так:

Для задания простого линейного градиента нам понадобится свойство CSS3

При этом на первом месте вы задаёте цвет, который будет находиться вверху, а на втором – цвет, который будет находиться внизу.
Цвета можно задавать как при помощи названий зарезервированных цветов, например:

Так и при помощи шестнадцатиричного кода, например:

То есть CSS код для задания градиента будет выглядеть так:

Вместо (#A4D8F7, #1C4D95) вы можете вписать свои цвета.
Также вы можете задавать три и более цветов для градиента.

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

Не забываем про кроссбрузерные префиксы! С ними код градиента будет выглядеть так:

Интересно получается, не правда ли? Однако и это ещё не всё!
В градиенте CSS3 вы можете задавать не только цвета перехода, но и их направление.
Например:

Направление можно задать при помощи параметров :

  • Top – цвета идут сверху вниз
  • Left – слева на право
  • Right – справа на лево
  • Bottom – снизу вверх

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

Кроме направления для градиента CSS3 можно задать угол наклона.
Выглядеть это будет примерно так:

CSS код для градиента:

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

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

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

Для задания радиального градиента используется следующее CSS свойство:

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

Код CSS3 для данного градиента будет выглядеть так:

Как видите даный CSS градиент растянуло в форме эллипса. Для того чтобы он был круглым нужно дописать ему параметр circle.
Тогда он примет следующий вид

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

Также для задания радиального градиента в CSS3 есть ещё ряд параметров:

    farthest-corner — при указании данного параметра градиент будет формироваться так что в боке будет отображаться его самый дальний угол.

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

В CSS коде это выглядит так:

closest-corner – отображает близжайший угол градиента

farthest-corner — отображает самый дальний угол градиента

Поэкспериментировав с разными свойствами и цветами можно получить очень интересные градиенты. Здесь всё зависит от вашей фантазии :)

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

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

  1. 1. Всегда используйте кроссбраузерные префиксы
  2. 2. Используйте двойной фон. Один будет просто цветом (для старых браузеров), а второй уже градиентом. В итоге если у браузера не получится отобразить градиент, то он отобразит обычный фон и ваш блок не окажется бесцветным.

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 градиенты. Примеры использования градиентов в HTML & CSS

Пояснения к статье:

  1. — CSS свойство которое принимает несколько значений. Свойство < background : linear-gradient(to top white 20%, red 50%, black 30%)>задает градиент переходящий снизу вверх. Цвета будет располагаться по площади следующим образом: 20% — белый, 50% — красный, 30% — черный.
  2. radial-gradient > — CSS свойство, которое служит для создания радиального градиента. Принимает несколько значений. Запись background: radial-gradient(circle at 65% 15%, aqua, darkblue) создаст фигуру сине-голубого шара.
  3. @keyFrame — ключевое слово, которое используется для стилизации некоторых элементов, чаще всего для анимации.
  4. animation > — свойство, которое отвечает за анимацию. Её значения определяют длительность(в секундах), функции и количество повторений.

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

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

Синтаксис

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

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

Для начала мы рассмотрим самый простой — создание линейного градиента. Он создается с помощью свойства linear-gradient.

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

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

Способов создания направления несколько, для этого используются точные и не точные значения. Из не точных значений выделяют to top, to bottom, to right и to left, которые задают направления вверх, вниз, вправо и влево соответственно.

Для указания другого направления записывается значение градусов угла наклона, которое измеряется в deg. 1 deg равен 1 градусу.

Для создания перехода цвета по диагонали можно использовать и ключевые слова, например сочетание to top left. Он задает линию переходящую влево, в верхний край экрана.

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

Запись < background : linear-gradient(to top, #fff 20%, #ccc, #000)>будет означать, что белый цвет будет занимать первые 20% области.

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

Задается с помощью команды radial-gradient. Основное отличие в том, что такой вид градиента распределяет цвета не по ровной линии, а выводит их наружу. Цвета будут располагаться в виде круга.

  • Первое значение, которое принимает команда radial-gradient — форма. Её можно указывать простыми словами — circle, ellipse и другие. По умолчанию стоит 2 значение.
  • Второе значение, в отличие от линейного градиента, задает положение центра. Для этого задаются такие же ключевые слова, с небольшим отличием: приставка to меняется на at.
  • С помощью точных значений можно задавать ширину и высоту градиента. Первое значение определяет ширину, а второе высоту. Для изменения ширины подходят такие размеры: %, rem и em.

Пример использования градиента. HTML & CSS

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

Как использовать CSS градиенты в вебе

Дата публикации: 2020-12-04

От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.

Основы градиентов

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


В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:

Мы можем изменить направление, если добавим новый параметр перед цветами:

Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).

Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:

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

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

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

Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.

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

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

Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Реальное применение

Где же можно использовать градиенты таким интересным образом?

1. Перекрывающий баннерный слой

Пример перекрытия, когда градиент слегка прозрачный (с помощью rgba значений) и расположен поверх фото.

Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:

2. Градиент на тексте

Градиент на тексте – крутой эффект, но он не полностью поддерживается. Вместо этого мы используем свойство background-clip (и префиксную версию -webkit-background-cli), которое является хаком, но отлично работает.

Сначала берем текст (h1) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:

3. Градиентные рамки

Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:

Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.

У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.

Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас):

Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div.

Далее (фух, в этот раз много шагов) мы добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.

Наконец, применяем нашего друга background-clip к родителю, но в этот раз со значением padding-box. Так div будет залит до края рамки, но не далее.

Последний способ не совсем рамка, но эффект похож.

Есть и третий способ, на box-shadow. Советую посмотреть Border-gradient mixin от John Grishin на сайте CodePen.

Заключение

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

Автор: Adi Purdila

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Дата изменения: 01.02.2020

Создание радиального градиента

Создать радиальный градиент в CSS3 ни чем не сложнее создания обычного линейного градиента. Для этого достаточно для нужного блока установить следующие правила

Формы радиального градиента

В отличии от направлений в линейном градиенте, в радиальном используются формы градиента, которые он может принимать, так-как радиальный градиент распространияется не по прямой а по радиусу (от сюда и название(с) КЭП). И может принимать 2 значения

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

Изначально, позиция радиального градиента установлена в центре, но мы можем манипулировать и этим параметром, перемещая её в нужном нам направлении

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Первое значение по оси Х второе по У.

Размер радиального градиента

Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Кросбраузерный радиальный градиент

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

Radial-gradient() в CSS

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

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

Для Webkitбраузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

Примечание: В старых версиях Webkit-браузеров использовался немного другой синтаксис, первым параметром там указывался тип градиента.

Для Firefox 3.6+:

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.


Для Internet Explorer

Градиент для IE 10+

Этот фильтр будет работать в старых версиях IE:

Кроссбраузерный CSS-градиент:

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

background : #999 ; /* for non-css3 browsers */

filter : prog >:DXImageTransform .Microsoft .gradient ( startColorstr = ‘#cccccc’ , endColorstr = ‘#000000’ ) ; /* для IE6-9 */
background : -webkit-linear-gradient ( top , bottom , #ccc , #000 ) ; /* для webkit-браузеров */
background : -moz-linear-gradient ( top , #ccc , #000 ) ; /* для firefox 3.6+ */
background : -o-linear-gradient ( top , #ccc , #000 ) ; /* для Opera 11.10+ */
background : -ms-linear-gradient ( top , #ccc , #000 ) ; /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

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

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

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

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

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

  • closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
  • closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
  • farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
  • farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
  • contain — тоже что и closest-side.
  • cover — тоже что и farthest-corner.

Онлайн-примеры

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3: CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Заключение.

Пожалуйста отметьте, что не все браузеры поддерживают CSS-градиент. Чтобы не возникло проблем, Вы не должны целиком полагаться на CSS-градиент, верстая шаблон.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

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

В общем случае синтаксис градиента (линейного) выглядит так:

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

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

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

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

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

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

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

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента ( circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

  • По центру вверху — top — 50% 0%;
  • В левом верхнем углу — left top — 0% 0%;
  • В правом верхнем углу — right top — 100% 0%;
  • По центру — center — 50% 50%;
  • Слева по центру — left center — 0% 50%;
  • Справа по центру — right center — 100% 50%;
  • По центру снизу — bottom — 50% 100%;
  • В левом нижнем углу — left bottom — 0% 100%;
  • В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Значение Описание
closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.
farthest-side Размер также рассчитывается из расстояния, но уже до дальних сторон.
closest-corner Теперь в качестве ориентира используются ближние углы.
farthest-corner Рассчитывается из расстояния до дальних углов.

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

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

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

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

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

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих ( -webkit- , -moz- , -ms- и -o- ). Поэтому синтаксически правильным является вот такое описание градиента:

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

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

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

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