diff options
Diffstat (limited to 'files/uk/web/css/linear-gradient()/index.html')
| -rw-r--r-- | files/uk/web/css/linear-gradient()/index.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/files/uk/web/css/linear-gradient()/index.html b/files/uk/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..cf11a60ebc --- /dev/null +++ b/files/uk/web/css/linear-gradient()/index.html @@ -0,0 +1,208 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +translation_of: Web/CSS/linear-gradient() +--- +<div>{{CSSRef}}</div> + +<p><strong><code>linear-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу {{CSSxRef("<gradient>")}} , що є спеціальним видом {{CSSxRef("<image>")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Як і будь-який градієнт, лінійний градієнт не має внутрішніх розмірів;</span> <span title="">тобто він не має природного або бажаного розміру, а також кращого співвідношення.</span> <span title="">Його розмір буде відповідати розміру елемента, до якого він застосовується.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Щоб створити лінійний градієнт, який повторюється так, щоб заповнити його контейнер, скористайтеся функцією </span></span> {{CSSxRef("repeating-linear-gradient")}}.</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Оскільки</span></span> <code><gradient></code> <span class="tlid-translation translation" lang="uk"><span title="">належить до типу даних</span></span> <code><image></code>, <span class="tlid-translation translation" lang="uk"><span title="">вони можуть використовуватися лише там, де можна використовувати</span></span> <code><image></code>. <span class="tlid-translation translation" lang="uk"><span title="">З цієї причини </span></span><code>linear-gradient()</code> не працюватиме там де застосовуються такі властивості як {{CSSxRef("background-color")}} і інших властивостях, що використовують тип даних {{CSSxRef("<color>")}}.</p> + +<h2 id="Композиція_лінійного_градієнту">Композиція лінійного градієнту</h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Лінійний градієнт визначається віссю - градієнтною лінією та двома або більше точками зупинки кольорів.</span> <span title="">Кожна точка на осі - виразний колір;</span> <span title="">щоб створити плавний градієнт, функція</span></span> <code>linear-gradient()</code> <span class="tlid-translation translation" lang="uk"><span title="">малює серію кольорових ліній, перпендикулярних лінії градієнта, кожна з яких відповідає кольору точки, де вона перетинає лінію градієнта.</span></span></p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Лінія градієнта визначається центром коробки, що містить зображення градієнта, і кутом.</span> <span title="">Кольори градієнта визначаються двома або більше точками: початковою точкою, кінцевою точкою та між ними необов’язковими кольоровими точками зупинки.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Початковою точкою є місце на лінії градієнта, де починається перший колір.</span> <span title="">Кінцевою точкою є точка, в якій закінчується останній колір.</span> <span title="">Кожна з цих двох точок визначається перетином лінії градієнта з перпендикулярною лінією, що проходить від кута коробки, який знаходиться в одному квадраті.</span> <span title="">Кінцеву точку можна просто зрозуміти як симетричну точку відліку.</span> <span title="">Ці дещо складні визначення призводять до цікавого ефекту, який іноді називають магічними кутами: кути, найближчі до початкової та кінцевої точок, мають той же колір, що і їхні відповідні початкові або кінцеві точки.</span></span></p> + +<h3 id="Налаштування_градієнтів"><span class="tlid-translation translation" lang="uk"><span title="">Налаштування градієнтів</span></span></h3> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Додавши більше точок зупинки кольорів у лінії градієнта, ви можете створити модифікований перехід між декількома кольорами.</span> <span title="">Позицію зупинки кольору можна чітко визначити, використовуючи</span></span> {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">або </span></span> {{CSSxRef("<percentage>")}}. <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви не вказали розташування кольору, він розміщується на півдорозі між тим, що йому передує, і тим, що слідує за ним.</span> <span title="">Наступні два градієнти рівнозначні.</span></span></p> + +<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> + +<p>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.</p> + +<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо дві або більше кольорових зупинки знаходяться в одному місці, переходом буде суцільна лінія між першим і останнім кольорами, задекларованими в цьому місці.</span></span> </p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки повинні бути вказані у порядку зростання.</span> <span title="">Подальші зупинки кольорів з меншим значенням замінять значення попередньої зупинки кольору, створюючи жорсткий перехід.</span> <span title="">Наступні зміни від червоного до жовтого на позначці 30%, а потім переходи від жовтого до синього понад 35% градієнта</span></span></p> + +<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%); +</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Допускається багатопозиційна зупинка кольору.</span> <span title="">Колір можна оголосити двома суміжними зупинками кольорів, задекларувавши обидві позиції в CSS.</span> <span title="">Наступні три градієнти еквівалентні:</span></span></p> + +<pre class="brush: 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%);</pre> + +<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням, якщо немає кольору із зупинкою 0%, перший заявлений колір буде в цій точці.</span> <span title="">Аналогічно, останній колір буде продовжуватись до позначки 100%, або буде на позначці 100%, якщо на останній зупинці не було оголошено жодної довжини.</span></span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="language-css" id="css">/* 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%);</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>Позиція стартової точки градієнта. Якщо її вказано починається зі слова <code>to</code> і до двох ключових слів: <span class="tlid-translation translation" lang="uk"><span title="">одне вказує горизонтальну сторону</span></span> (<code>left</code> or <code>right</code>), а інше вертикальну сторону (<code>top</code> or <code>bottom</code>). <span class="tlid-translation translation" lang="uk"><span title="">Порядок бічних ключових слів не має значення.</span> <span title="">Якщо не вказано, він за замовчуванням буде </span></span> <code>to bottom</code> .</dd> + <dd>Значення <code>to top</code>, <code>to bottom</code>, <code>to left</code>, і <code>to right</code> еквівалентні <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, і <code>90deg</code>, відповідно. Інші значення конвертуються в значення кутів.</dd> + <dt>{{CSSxRef("<angle>")}}</dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Кут нахилу лінії градієнта</span></span> . <span class="tlid-translation translation" lang="uk"><span title="">Значення</span></span> <code>0deg</code> еквівалентне <code>to top</code>; <span class="tlid-translation translation" lang="uk"><span title="">зростаючі значення обертаються за годинниковою стрілкою</span></span> .</dd> + <dt><code><linear-color-stop></code></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Кольорові зупинки</span></span> {{CSSxRef("<color>")}} значення, <span class="tlid-translation translation" lang="uk"><span title="">з подальшим одним або двома опціональними положеннями точок зупинки</span></span>, ( <span class="tlid-translation translation" lang="uk"><span title="">кожен з яких є або</span></span> {{CSSxRef("<percentage>")}} або {{CSSxRef("<length>")}} <span class="tlid-translation translation" lang="uk"><span title="">по осі градієнта</span></span> ).</dd> + <dt><code><color-hint></code></dt> + <dd>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.</dd> + <dd> + <div class="note"> + <p><strong>Примітка:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p> + </div> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">linear-gradient( + [ <a href="/en-US/CSS/angle"><angle></a> | 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> ]</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Градієнт_під_кутом_45_градусів"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт під кутом 45 градусів</span></span></h3> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(45deg, red, blue); +}</pre> + +<p>{{EmbedLiveSample("Градієнт_під_кутом_45_градусів", 120, 120)}}</p> + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">Gradient that starts at 60% of the gradient line</h3> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(135deg, orange, orange 60%, cyan); +}</pre> + +<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p> + +<h3 id="Градієнт_з_багатопозиційними_точками_зупинки"><span class="tlid-translation translation" lang="uk"><span title="">Градієнт з багатопозиційними точками зупинки</span></span></h3> + +<p>У цьому прикладі використовуються багатопозиційні кольорові зупинки, причому сусідні кольори мають однакове значення стоп кольору, створюючи смугастий ефект.</p> + +<div class="hidden"> +<pre class="brush: css">body { + width: 100vw; + height: 100vh; +}</pre> +</div> + +<pre class="brush: css">body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +}</pre> + +<p>{{EmbedLiveSample("Градієнт_з_багатопозиційними_точками_зупинки", 120, 120)}}</p> + +<div class="note"> +<p><strong>Примітка:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>Adds interpolation hints.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> + +<div class="hidden"><span class="tlid-translation translation" lang="uk"><span title="">Таблиця сумісності на цій сторінці формується із структурованих даних</span></span> . If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> + +<h2 id="Дивіться_також">Дивіться також</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li> + <li>Other gradient functions: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> + <li>{{CSSxRef("<image>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> |