Webkit gradient linear: -webkit-linear-gradient | htmlbook.ru

Leave a Comment / Разное / By /

404 —

  • IEK Group, :[email protected]

    (, , ) , .

  • , : helptd@iek. ru
    (, , ) .

  • Диалюкс, [email protected]
    (, , ) : ( ), , .

linear-gradient — файлы CSS 3

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

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается через Интернет Проводник до версии 10 и Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.

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

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

Общее описание

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

фон : линейный градиент (1 слева, 2 красных, 3 синих 4 30%, 5 зеленых)

  1. Опционально. Начальная точка градиента, определяющая прямую линию, по которой градиент проходит до конечной точки. Применяются общие значения свойства background-position. В этом случае левый определяет градиент слева направо, левый верхний будет диагональным градиентом, идущим от верхнего левого угла к нижнему правому. Также может быть углом, где 0 градусов указывает вправо, 90 градусов указывает вверх, а -45 градусов идет от верхнего левого угла к нижнему правому. По умолчанию используется градиент сверху вниз (сверху).
  2. Начальный цвет (первая остановка цвета). Также может быть дополнен положением остановки для перемещения его положения по оси градиента (например, в 4).
  3. Дополнительно. Остановка цвета. В этом случае градиент не просто переходит от красного (2) к зеленому (5), а усиливается за счет синего цвета в середине. Возможны несколько цветовых остановок (возможно, усиленных остановкой, например, 4), разделенных запятыми.
  4. Дополнительно. Стоп положение. Определяет положение точки цвета на оси градиента. В этом случае для синего установлено значение 30% вместо 50% (что было бы естественным поведением). Также может быть значением длины (например, 20 пикселей).
  5. Конечный цвет (последняя остановка цвета). Также может быть расширен стоп-положением (например, в 4).
Примеры

Диагональный градиент с несколькими точками цвета

Фон: линейный градиент (1 225 градусов, 2 красных, 3 зеленых 20%, 4 желтых 70%, 5 черных)

  1. Начальная точка. Градиент начинается в верхнем правом углу и проходит в нижний левый угол. То же, что -135 градусов.
  2. Начальный цвет красный.
  3. Цветная остановка. Цвет зеленый на 20% по оси градиента (вместо 33%, что было бы его естественным положением).
  4. Цветная остановка. Цвет желтый на 70% по оси градиента (вместо 66%).
  5. Конечный цвет белый.

Угловой градиент только с цветовыми точками

фон: линейный градиент (1 105 градусов, 2 черных 20%, 3 пурпурных 80%)

  1. Начальная точка. Градиент имеет угол 105 градусов.
  2. Цветная остановка. Начальный черный цвет перемещен на 20% по оси градиента (вместо 0%).
  3. Цветная остановка. Конечный цвет пурпурного перемещается на 80% по оси градиента (вместо 100%).
Дополнительная литература

Для получения дополнительной информации посетите сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).

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

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается через Интернет Проводник до версии 10 и Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.

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

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

Общее описание

Через запятую можно указать несколько градиентов. По умолчанию градиенты заполняют весь фон. Мозаичные градиенты см. в разделе Repeating-Radial-Gradient. Возможны rgba и прозрачные значения для всей цветовой информации.

фон: радиальный градиент (1 60 пикселей 45 пикселей, 2 круга 3 ближней стороны, 4 красных, 5 синих 6 60%, 7 зеленых)

  1. Необязательно. Центр градиента. Применяются общие значения свойства background-position. В этом случае 20px 40px определяет, что центр градиента находится в 20px от левой стороны содержащего блока и в 40px от верха. Также может быть процент, который относится к размерам коробки. По умолчанию используется центр, который также применяется для второго значения, если задано только одно.
  2. Дополнительно. Форма градиента, в данном случае круглая. По умолчанию эллипс.
  3. Дополнительно. Размер градиента. Может быть определено ключевым словом или длиной расширения. Доступны следующие ключевые слова: ближайшая сторона, ближайший угол, самая дальняя сторона, самый дальний угол. Смотри описание. Если указана длина, она относится к радиусам и должна состоять из двух значений: длины по горизонтали и по вертикали. По умолчанию самый дальний угол.
  4. Начальный цвет (первая остановка цвета). Также можно улучшить с помощью стоп-позиции, чтобы переместить свою позицию на градиентном луче (например, в 6).
  5. Дополнительно. Остановка цвета. В этом случае градиент не просто переходит от красного (4) к зеленому (7), а усиливается за счет синего цвета в середине. Возможны несколько цветовых остановок (возможно, расширенных за счет позиции остановки, например, 6), разделенных запятыми.
  6. Дополнительно. Стоп положение. Определяет положение точки цвета на луче градиента. В этом случае для синего установлено значение 60% вместо 50% (что было бы естественным поведением). Также может быть значением длины (например, 20 пикселей).
  7. Конечный цвет (последняя остановка цвета). Также может быть расширен стоп-положением (например, 6).
Описание ключевых слов размера

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

  1. ближайшая сторона: Размер градиента определяется таким образом, чтобы его внешняя форма соответствовала стороне поля градиента, ближайшей к его центру. Если указан эллипс, стороны в обоих измерениях совпадают.
  2. дальняя сторона: градиент имеет такой размер, чтобы его внешняя форма соответствовала стороне поля градиента, наиболее удаленной от его центра. Если указан эллипс, стороны в обоих измерениях совпадают.
  3. ближайший угол: градиент имеет такой размер, что его внешняя форма проходит через угол поля градиента, ближайший к его центру. Если указан эллипс, ему присваивается такое же соотношение сторон, как если бы была указана ближайшая сторона (1).
  4. дальний угол: градиент имеет такой размер, что его внешняя форма проходит через угол поля градиента, наиболее удаленный от его центра (значение по умолчанию). Если указан эллипс, ему присваивается такое же соотношение сторон, как если бы была указана самая дальняя сторона (2).
Примеры

Круговой градиент, заканчивающийся в ближайшем углу

Фон: радиальный градиент (1 60% 55%, 2 круг 3 ближайший угол, 4 красный, 5 зеленый 20%, 6 желтый 70%, 7 черный)

  1. Центр градиента лежит на 60 % ширины блоков по горизонтали и на 55 % высоты по вертикали.
  2. Круговой градиент.
  3. Градиент имеет такой размер, что его внешняя форма проходит через ближайший угол поля градиента.
  4. Начальный цвет красный.
  5. Цветная остановка. Цвет зеленый на 20% на градиентном луче (вместо 33%, что было бы его естественным положением).
  6. Цветная остановка. Цвет желтый на 70% на луче градиента (вместо 66%).
  7. Конечный цвет черный.
Эллиптический градиент, заканчивающийся на самой дальней стороне

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

фон: радиальный градиент (1 20px 40px, 2 дальняя сторона, 3 белый 20%, 4 пурпурный)

  1. Центр градиента находится на расстоянии 20 пикселей слева и 40 пикселей сверху.
  2. Градиент имеет такой размер, чтобы его внешняя форма совпадала с самыми дальними сторонами.
  3. Цветная остановка. Начальный белый цвет перемещен на 20% по оси градиента (вместо 0%).
  4. Конечный цвет пурпурного.
Дополнительная литература

Для получения дополнительной информации посетите сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).

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

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Interent Проводник до версии 10 и Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

Общее описание

Информацию об общем синтаксисе см. в разделе linear-gradient.

Примеры

Плавный градиент, повторенный четыре раза

фон: повторяющийся линейный градиент (1 красный, 2 зеленых 18%, 3 синих 25%)

  1. Начальный цвет красный.
  2. Цветная остановка. Цвет зеленый на 18% по оси градиента (вместо 12,5%, что было бы его естественным положением).
  3. Цветная остановка. Цвет синий на 25% по оси градиента. Последнее положение остановки определяет, как часто будет повторяться градиент. Поскольку 25 % — это четверть 100 %, градиент повторяется четыре раза.

Резкий переходный градиент, повторяющийся пять раз

фон: повторяющийся линейный градиент (1 красный, 2 красных 11 пикселей, 3 белых 11 пикселей, 4 белых 22 пикселя)

  1. Начальный цвет красный.
  2. Цветная остановка. Цвет красный в 11px по оси градиента.
  3. Цветная остановка. Цвет белый с шагом 11 пикселей по оси градиента. Поскольку есть два цвета, установленных в одном и том же месте, они внезапно меняются, а не плавно переходят в розовый.
  4. Цветная остановка. Цвет белый с шагом 22 пикселя по оси градиента. Последнее положение остановки определяет, как часто будет повторяться градиент. Предполагая, что прямоугольник имеет высоту 110 пикселей, градиент вписывается в него пять раз из-за его длины 22 пикселя.
Дополнительная литература

Для получения дополнительной информации посетите сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузера).

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

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
radial-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается через Интернет Проводник до версии 10 и Opera Mini. Подробную информацию о совместимости см. на сайте caniuse.com.

Firefox 16+Safari 5.1+Chrome 26+Internet Explorer 10+Opera 12.1+
iOS 5+Android 4+Blackberry 10+IE Mobile 10+

Общее описание

Информацию об общем синтаксисе см. в радиальном градиенте.

Примеры

Плавный градиент, повторенный два раза

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

фон: повторяющийся радиальный градиент (1 ближайшая сторона, 2 красных, 3 зеленых 20%, 4 синих 50%)

  1. Градиент имеет такой размер, чтобы его внешняя форма соответствовала ближайшей стороне.
  2. Начальный цвет красный.
  3. Цветная остановка. Цвет зеленый на 20% по оси градиента (вместо 25%, что было бы его естественным положением).
  4. Цветная остановка. Цвет синий на 50% по оси градиента. Последнее положение остановки определяет, как часто будет повторяться градиент. Поскольку 50 % — это половина 100 %, градиент повторяется два раза (на основе объявления ближайшей стороны в 1).

Градиент резкого перехода, повторяющийся бесконечно 30% ширины блоков по горизонтали и 40% высоты по вертикали, что приводит к эллиптической форме.

  • Начальный цвет красный.
  • Цветная остановка. Цвет красный на 11px на луче градиента.
  • Цветная остановка.

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

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