-o-radial-gradient в CSS


Содержание

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 не ограничивается линейными градиентами. В вашем распоряжении есть и радиальный градиент, который устанавливается соответствующей функцией radial-gradient() .

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

Позиционирование

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

Форма и радиус

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

  • ellipse — градиент эллиптической формы (значение по умолчанию);
  • circle — градиент круглой формы.

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y. По умолчанию радиальным градиентом полностью заполняется фон элемента.

Размер

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

closest-side — создается градиент, который расходится только до ближайшей стороны элемента:

closest-corner — градиент расходится только до ближайшего угла элемента:

farthest-side — противоположно closest-side, градиент расходится до самой дальней стороны элемента:

farthest-corner — противоположно closest-corner, градиент расходится до самого дальнего угла элемента:

Опорные точки

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

Поддержка браузерами

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

Далее в учебнике: repeating-radial-gradient() — повторяющийся радиальный градиент.

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 » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS radial-gradient() Function

Example

A radial gradient with evenly spaced color stops:

More «Try it Yourself» examples below.

Definition and Usage

The radial-gradient() function sets a radial gradient as the background image.

A radial gradient is defined by its center.

To create a radial gradient you must define at least two color stops.

Example of Radial Gradient:

Version: CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Function
radial-gradient() 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

CSS Syntax

Value Description
shape Defines the shape of the gradient. Possible values:
  • ellipse (default)
  • circle
size Defines the size of the gradient. Possible values:
  • farthest-corner (default)
  • closest-side
  • closest-corner
  • farthest-side
position Defines the position of the gradient. Default is «center»
start-color, . last-color Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

More Examples

Example

A radial gradient with differently spaced color stops:

Example

A radial gradient with the shape of a circle:

Example

A radial gradient with different size keywords:

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

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

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.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. Используйте двойной фон. Один будет просто цветом (для старых браузеров), а второй уже градиентом. В итоге если у браузера не получится отобразить градиент, то он отобразит обычный фон и ваш блок не окажется бесцветным.

Градиенты CSS

Дата публикации: 2014-04-28

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

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

Градиенты – это фоновое изображение

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

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

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

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

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

Разделенные запятыми цвета отображают обычно применяемый вами цвет: Hex, именованные цвета, rgba, hsla и т.д. Чтобы сделать градиент слева направо, передайте дополнительный параметр в начале функции linear-gradient(), начинающейся со слова to, означающем направление, например to right:

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

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

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

Также можно заявить, где должен начинаться любой из отдельных цветов. Это называется «цветовыми остановами». Скажем, если вам нужно, чтобы желтый занимал больше всего места, а красный – совсем немного в самом начале, можно сделать color-stop желтого цвета довольно рано:

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

Браузерная поддержка/Префиксы

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

Старый: исходный способ, применимый исключительно к WebKit, с такими штуками, как from() и color-stop()

Подростковый: старая система углов, например, left

Молодой: свежеиспеченная система углов, например, to right

А также префиксы. Давайте составим список:

Chrome

1-9: Старый, с префиксом

10-25: Подростковый, с префиксом

26: Молодой, без префикса

Safari

3-: Поддержка отсутствует

4-5.0: Старый, с префиксом

6.1: Молодой, без префикса

Firefox

3.5-: Поддержка отсутствует

3.6-15: Подростковый, с префиксом

16: Молодой, без префикса

Opera

11.0-: Поддержка отсутствует

11.1-11.5: Подростковый, с префиксом, только линейный

11.6-12: Подростковый, с префиксом, добавлен радиальный

12.1: Подростковый, без префикса

15: Молодой, без префикса

IE

8-: Поддержка отсутствует

9: Только фильтры

10+: Молодой, без префикса (также поддерживается Подростковый с префиксом)

Android

2.0-: Поддержка отсутствует

2.1-3.0: Подростковый, с префиксом

4.0-4.3: Молодой, с префиксом

4.4+: Молодой, без префикса

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

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

iOS

3-: Поддержка отсутствует

3.2-4.3: Подростковый, с префиксом

5.0-6.1: Молодой, с префиксом

7.0: Молодой, без префикса

Здесь имеется небольшое наложение. Например, когда браузер поддерживает «молодой» синтаксис, он, возможно, также поддерживает более старые синтаксисы, включающие префикс. Лучше всего поступать так: если поддерживается «молодой», то его и применяйте. Так что, если вам нужна абсолютная глубочайшая браузерная поддержка, линейный градиент будет выглядеть примерно так:

Тут ужасно много кода. Писать его вручную – это возможные ошибки и большое количество труда. Справиться с ним помогает Autoprefixer, позволяющий отрезать фрагменты кода, когда вы решите, какие браузеры будете поддерживать. Примесь-миксин Compass умеет делать URI данных SVG для IE 9, если вам это важно.

Фильтры IE

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

Вот некоторые рассуждения на тему, применять их или нет:

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

background-image отменяет фильтр, поэтому если вам нужно применить его для альтернативного варианта, фильтры останутся за бортом. Если в качестве альтернативы подходит плотный цвет (background-color), можно применить фильтр

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

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

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

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

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

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

Здесь возможны значения: closest-corner, closest-side, farthest-corner, farthest-side. О них можно думать так: «Мне нужно, чтобы этот радиальный градиент затухал от центральной точки до __________, приспосабливался и заполнял все вокруг».

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

Я проясню здесь все, приведя пример квадрата и регулировки цветового останова:

Браузерная поддержка

В основном такая же, как у linear-gradient(), за исключением того, что, когда начиналась поддержка градиентов, в очень старой версии Opera были только линейные, а не радиальные. Как и линейный, radial-gradient() претерпел некоторые изменения синтаксиса. И опять здесь: «Старый», «Подростковый» и «Молодой».

Старый: с префиксом -webkit-, штуки вроде from() и color-stop()

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

Молодой: многословный первый параметр, типа circle closest-corner at top right

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

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

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

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

Пользуясь repeating-linear-gradient(), не приходится прибегать к подобным хитростям. Размер градиента определяется последним цветовым стопом. Если он происходит на 20px, то размер градиента (который затем повторяется) – это квадрат 20px на 20px.

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, как сделать градиент на сайте

При разработке дизайна проекта бывают случаи, когда необходимо создать градиент на сайте, то есть плавный переход цвета из одного в другой. Раньше сделать это стандартными средствами была проблематично, но с появлением 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 можно получить различные фоновые картинки без использования изображений. Но самому разрабатывать градиенты может быть не очень удобно, поэтому в сети есть готовые сервисы для генерации кода градиентов.

Взгляд на 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

Градиент в CSS — это постепенный переход одного цвета в другой между двумя точками.

Линейный градиент linear-gradient

линейный градиент распространяется (чаще сверху вниз) по линии

состоит из двух и более оттенков

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

радиальный градиент распространяется по окружности

состоит из двух и более оттенков

Как объединить градиенты CSS

Пример

23 комментария:

Андрей Opera 11.10:
background-image:-o-linear-gradient(top,#000,#FFF); NMitra Спасибо большое, Андрей! Добавила замечание в статью. Анонимный у вас с версткой беда, код на текст наезжает ff 17.0.1 NMitra Спасибо! Обязательно исправлю. Это получилось после того, как поменяла дизайн. Не хватает пока времени. Анонимный ахахахах на твоей иконке как будто человек со своим членом балуется NMitra Такой ассоциации ещё не было. :) Это же фига Анонимный Спасибо, очень помогли! NMitra Пока не осилила статью )) Чуть-чуть осталось Анонимный Спасибо за полезную статью! :) алексей кленов Помогите пожалуйста с градиентом самого текста, а не фона NMitra Только для Хрома http://css-tricks.com/snippets/css/gradient-text/
Вот пример с тенями http://jsfiddle.net/2GgqR/5/ Oleg Aqausonick Круто. Что ещё можно сказать..) Я даже попытался всё это объединить на одной своей странице. ) http://tambov-computer.ru/information-for-first-web-developers/207-how-to-make-gradient-in-background-css
ИМХО немного растянуто но всёже круто! :) Спаисбо. Анонимный С градиентом удобно работать в онлайн генераторе.
http://www.germansoft.ru/lesson/online/css-generation.php Вот тут например. Есть и образцы работ.Прикольно NMitra Вы не правы. Градиенты нужно понять, там не такая уж сложная разметка. А потом можно делать такие вот штуки http://shpargalkablog.ru/2013/02/home-css.html или такие http://shpargalkablog.ru/2011/07/ugol-css.html Анонимный В IE не работает( посоветуйте что можно сделать, пожалуйста) спасибо за полезную статью, очень пригодилась) NMitra Какая версия IE у вас? Вариант — помимо градиента использовать однотонный цвет.

background-color: red;
background-image: linear-gradient(#ff0000, #ffff00);

Есть ещё @supports. С помощью него можно показать как отображать элемент на устройствах, не поддерживающих градиент. NMitra Забыла сказать, раньше вместо linear-gradient использовали изображение jpeg. phpguru Познавательно спасибо! NMitra Сама как начинаю мучить градиенты, бегу к этой статье :) Scarlet Я использую http://gradientgenerator.com Он простой, но содержит все необходимые настройки. NMitra Спасибо за инструмент Анонимный После: «Синтаксис радиального градиента» — «начинаются чудеса», что в мозиле, что в IE. NMitra Спасибо за участие!

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

Илон Маск рекомендует:  TDateTime - Тип Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL