linear-gradient()

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

linear-gradient() CSS функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу <gradient> , що є спеціальним видом <image>.

Як і будь-який градієнт, лінійний градієнт не має внутрішніх розмірів; тобто він не має природного або бажаного розміру, а також кращого співвідношення. Його розмір буде відповідати розміру елемента, до якого він застосовується.

Щоб створити лінійний градієнт, який повторюється так, щоб заповнити його контейнер, скористайтеся функцією repeating-linear-gradient.

Оскільки <gradient> належить до типу даних <image>вони можуть використовуватися лише там, де можна використовувати <image>. З цієї причини linear-gradient() не працюватиме там де застосовуються такі властивості як background-color і інших властивостях, що використовують тип даних  <color>.

Композиція лінійного градієнту

Лінійний градієнт визначається віссю - градієнтною лінією та двома або більше точками зупинки кольорів. Кожна точка на осі - виразний колір; щоб створити плавний градієнт, функція linear-gradient() малює серію кольорових ліній, перпендикулярних лінії градієнта, кожна з яких відповідає кольору точки, де вона перетинає лінію градієнта.

linear-gradient.png

Лінія градієнта визначається центром коробки, що містить зображення градієнта, і кутом. Кольори градієнта визначаються двома або більше точками: початковою точкою, кінцевою точкою та між ними необов’язковими кольоровими точками зупинки.

Початковою точкою є місце на лінії градієнта, де починається перший колір. Кінцевою точкою є точка, в якій закінчується останній колір. Кожна з цих двох точок визначається перетином лінії градієнта з перпендикулярною лінією, що проходить від кута коробки, який знаходиться в одному квадраті. Кінцеву точку можна просто зрозуміти як симетричну точку відліку. Ці дещо складні визначення призводять до цікавого ефекту, який іноді називають магічними кутами: кути, найближчі до початкової та кінцевої точок, мають той же колір, що і їхні відповідні початкові або кінцеві точки.

Налаштування градієнтів

Додавши більше точок зупинки кольорів у лінії градієнта, ви можете створити модифікований перехід між декількома кольорами. Позицію зупинки кольору можна чітко визначити, використовуючи <length> або <percentage>. Якщо ви не вказали розташування кольору, він розміщується на півдорозі між тим, що йому передує, і тим, що слідує за ним. Наступні два градієнти рівнозначні.

linear-gradient(red, orange, yellow, green, blue); 
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

linear-gradient(red 10%, 30%, blue 90%);

Якщо дві або більше кольорових зупинки знаходяться в одному місці, переходом буде суцільна лінія між першим і останнім кольорами, задекларованими в цьому місці.  

Кольорові зупинки повинні бути вказані у порядку зростання. Подальші зупинки кольорів з меншим значенням замінять значення попередньої зупинки кольору, створюючи жорсткий перехід. Наступні зміни від червоного до жовтого на позначці 30%, а потім переходи від жовтого до синього понад 35% градієнта

linear-gradient(red 40%, yellow 30%, blue 65%);

Допускається багатопозиційна зупинка кольору. Колір можна оголосити двома суміжними зупинками кольорів, задекларувавши обидві позиції в CSS. Наступні три градієнти еквівалентні:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

За замовчуванням, якщо немає кольору із зупинкою 0%, перший заявлений колір буде в цій точці. Аналогічно, останній колір буде продовжуватись до позначки 100%, або буде на позначці 100%, якщо на останній зупинці не було оголошено жодної довжини.

Синтаксис

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

/* Color hint: A gradient going from the left to right, 
   starting red, getting to the midpoint color 
   10% of the way across the length of the gradient, 
   taking the rest of the 90% of the length to change to blue */ 
linear-gradient(.25turn, red, 10%, blue);

/* Multi-position color stop: A gradient tilted 45 degrees, 
   with a red bottom-left half and a blue top-right half, 
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

Values

<side-or-corner>
Позиція стартової точки градієнта. Якщо її вказано починається зі слова to і до двох ключових слів: одне вказує горизонтальну сторону (left or right), а інше вертикальну сторону (top or bottom). Порядок бічних ключових слів не має значення. Якщо не вказано, він за замовчуванням буде to bottom .
Значення to top, to bottom, to left, і to right еквівалентні 0deg, 180deg, 270deg, і 90deg, відповідно. Інші значення конвертуються в значення кутів.
<angle>
Кут нахилу лінії градієнта . Значення 0deg еквівалентне to top; зростаючі значення обертаються за годинниковою стрілкою .
<linear-color-stop>
Кольорові зупинки <color> значення, з подальшим одним або двома опціональними положеннями точок зупинки, ( кожен з яких є або <percentage> або <length> по осі градієнта ).
<color-hint>
The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Примітка: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Formal syntax

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

Приклади

Градієнт під кутом 45 градусів

body {
  background: linear-gradient(45deg, red, blue);
}

Gradient that starts at 60% of the gradient line

body {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

Градієнт з багатопозиційними точками зупинки

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

body {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

Примітка: Please see Using CSS gradients for more examples.

Специфікації

Specification Status Comment
CSS Images Module Level 4
The definition of 'Gradient Color-Stops' in that specification.
Working Draft Adds interpolation hints.
CSS Images Module Level 3
The definition of 'linear-gradient()' in that specification.
Candidate Recommendation Initial definition.

Сумісність з браузерами

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
linear-gradient()Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
No support 11 — 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
No support 11 — 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS Full support 6.1
Full support 6.1
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Samsung Internet Android Full support 1.5
Full support 1.5
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Double-position color stopsChrome Full support 71Edge Full support 79Firefox Full support 64IE No support NoOpera Full support 58Safari Full support 12.1WebView Android Full support 71Chrome Android Full support 71Firefox Android Full support 64Opera Android Full support 50Safari iOS Full support 12.2Samsung Internet Android Full support 10.0
Interpolation Hints / Gradient MidpointsChrome Full support 40Edge Full support 79Firefox Full support 36IE No support NoOpera Full support 27Safari Full support 6.1WebView Android Full support 40Chrome Android Full support 40Firefox Android Full support 36Opera Android Full support 27Safari iOS Full support 6.1Samsung Internet Android Full support 4.0
to keywordChrome Full support 26Edge Full support 12Firefox Full support 10IE Full support 10Opera Full support 12.1Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 10Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
Unitless 0 for <angle>Chrome Full support 26Edge Full support 12Firefox Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE No support NoOpera Full support 16Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Дивіться також