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

Робота над перекладом про проект singlediv.com показала, що деякі інструменти CSS мають більш широке застосування, ніж я звикла думати. Але для того щоб зуміти знайти це застосування, необхідно чітко розуміти особливості властивості. Яскравим прикладом став linear-gradient, який Лінн Фішер віртуозно використовувала в своїх роботах.

Хочете зробити симпатичний градієнтний фон на своєму сайті? background-image: linear-gradient (red, blue); готово! Так, це трохи нудно. Тому, якщо ви хочете чогось більшого, рекомендую вам цю з порадами по css і MDN сторінку. Ви ще тут? Тоді давайте розглянемо деякі моменти, як насправді працюють лінійні градієнти. Для початку, давайте згадаємо синтаксис, який можна використовувати в функції лінійного градієнта:

linear-gradient ([від<угла> | до<стороны-или-угла>]?, );
Функція приймає опціональний перший аргумент, який визначає кут градієнта, і який можна виразити за допомогою одиниці виміру (градус, радіус, град, оборот) або у вигляді ключового слова (сторони або кута.

Після цього функція приймає список квітів.

поле градієнта

Як правило, коли ви застосовуєте фонове зображення у вигляді лінійного градієнта до елементу DOM, цією областю є рамка кордонів елемента (яка є тією самою областю, в якій відображається фоновий колір).

При цьому якщо ви використовуєте ще й CSS-властивість background-size (розмір фону) і встановлюєте його, скажімо, на 200px * 200px, тоді поле градієнта матиме цей розмір і буде, за замовчуванням, розміщуватися в лівому верхньому кутку DOM-елемента, якщо тільки ви також не встановите background-position (положення фону).

Тому, читаючи такі розділи, просто пам'ятайте, що поле градієнта не завжди розташоване так само і має такі ж розміри, як і DOM-елемент, до якого ви застосовуєте цей градієнт.

лінія градієнта

кут градієнта

Якщо С - це центральна точка поля градієнта, тоді А - це кут між вертикальною лінією, що проходить через С, і лінією градієнта, яка також проходить через С, і вздовж якої розподіляються стоп-кольору градієнта.

Цей кут можна визначити двома способами:

За допомогою одного з ключових слів: to top (вгору), to bottom (вниз), to left (ліворуч), to right (праворуч), to top right (праворуч вгору), to top left (ліворуч вгору), to bottom right (вправо вниз), to bottom left (ліворуч вниз);
Або шляхом визначення кута з числом і одиницею виміру, наприклад 45deg (45 градусів), 1turn (1 оборот);

Якщо кут не вказується, то за замовчуванням він прямує вниз (тобто це 180 градусів або 0,5 обороту):

У наведеному вище прикладі кут не вказано, тому градієнт від білого до червоного рухається зверху вниз, що відповідає ключовим словом to bottom (вниз), як показано нижче:

І, як показано на 2 наступних зображеннях, to top (вгору) відповідає куту в нуль градусів:

Ще один важливий момент, який варто враховувати, використовуючи ключові слова кута - що to top right (праворуч вгору), наприклад, (або будь-яке інше ключове слово кута) залежить від розмірів поля градієнта.

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

Тому to top right (праворуч вгору) не означає, що лінія градієнта проходить через правий верхній кут, і це навіть не означає, що кут градієнта дорівнює 45 градусам!

Давайте подивимося на те, як переміщається лінія градієнта при зміні кута, за допомогою наступної анімації:

Давайте згадаємо, що ми знаємо про кути градієнта:

Кут вимірюється між лінією градієнта і лінією, яка виходить з центру поля градієнта і рухається вгору.
Тому 0 градусів означає вгору.
Стандартне значення кута, якщо воно не вказується, це вниз, що дорівнює 180 градусам.
Ключові слова кута залежать від розмірів поля градієнта.

Довжина лінії градієнта

Подивіться на приклад:

Нам потрібен градієнт від червоного до синього з кутом 45 градусів, і, з огляду на співвідношення сторін поля градієнта, лінія градієнта не може проходити через правий верхній кут.

Але браузер хоче (тобто, специфікації змушують його) зробити правий верхній кут чисто синім. Якби ми зробили так, щоб лінія градієнта починалася і закінчувалася на краях поля, тоді б синій колір зайняв більшу частину поля, а градієнт б так не розпливався.

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

Фактично, якщо ви задає ширину поля градієнта W, висоту H, і кут градієнта, тоді довжина лінії градієнта становить:

Abs (W * sin (A)) + abs (H * cos (A))

кольору

Тому необов'язково вказувати, де повинні розміщуватися кольору на лінії градієнта. наприклад:

На самому простому прикладі тільки з 2 квітами, колір 1 буде розміщуватися на 0% (на початку лінії градієнта), а колір 2 - на 100% (в кінці лінії градієнта).

Потім, якщо ви додасте третій колір, колір 1 у вас все одно залишиться на 0%, колір 2 буде на 50%, а колір 3 - на 100%, і так далі.

У наведеному вище прикладі було задано 5 стоп-кольорів, і браузер розрахував їх відносне положення як 0%, 25%, 50%, 75%, 100%. Причиною тому є рівномірний розподіл уздовж поля градієнта.

Позицію кольору можна виразити або за допомогою процентного співвідношення (по відношенню до розміру лінії градієнта) або у вигляді довжини CSS (де діє будь-яка одиниця виміру CSS).

Ось приклад:

Як ви бачите, кожен з 5 стоп-кольорів має своє становище, заданий в пікселях. Ці положення розраховуються від початку лінії градієнта.

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

На зображенні вище 7 кольорів, і вони встановлені таким чином, щоб наступний колір починався в точно тієї ж позиції, що і останній, що означає, що браузеру не потрібно заповнювати простір між двома стоп-квітами градієнтом.

Звичайно, це все мило і кумедно, але що станеться, якщо ви змішайте позиційований кольору з непозіціонірованнимі? Тоді ви змусите браузер працювати більше і попросіть його автоматично розподіляти кольору, для яких ви не вказали позицію:

У цьому простому прикладі другий колір (оранжевий) не має позиції, тому браузер сам визначає її і знаходить відповідне місце між раніше заданим і наступним кольором. Тут це дуже просто, так як безпосередні сусіди другого кольору мають свою позицію, але якщо позиції є тільки у деяких квітів, або якщо попередні або наступні кольори не мають позиції, все ускладнюється.

Давайте розглянемо декілька прикладів:

На прикладі вище тільки третій колір (жовтий) позиціонується на 30%. Тому, щоб краще розподілити всі інші, перший розміщується на 0%, останній - на 100%, а інші кольори розподіляються в проміжку (так, що помаранчевий закінчується безпосередньо між 0% і 30%, а червоний - між 30% і 100%) .

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

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

І якщо ви хочете змусити свій браузер працювати ще більше, чому б не вказати порядок позицій?

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

Почнемо з першого кольору (червоного), розташованого на 30%. Далі другий колір розташований на 10%, що вже неправильно, так як, як сказано вище, кольору повинні вказуватися по зростанню позиції. Тому тут браузер виправляє позицію другого кольору і встановлює його в той же стан, що й у попереднього кольору (30%). Далі йде третій колір (жовтий), розташований на 60%, що правильно, але за ним слід четвертий (синій) на 40%. Знову ж позиція коригується і встановлюється на те ж значення, що і попереднього позиціонованого кольору.

В кінцевому підсумку, як показано на прикладі вище, останній колір (синій) позиціонується неправильно і браузер робить його позицію такий же, як і у попереднього кольору, який в даному випадку не є ні його безпосереднім сусідом (жовтим), ні сусідом кольору, який стоїть перед ним (помаранчевим), тому він повинен повернутися до першому кольором (червоному). Таким чином, всі кольори між червоним і синім встановлені в положення 30% і тому невидимі.

Інструменти

В інструменті є всі види багів і обмежень (див. Коментарі в javascript), тому не чекайте від нього багато чого.

Градієнт. Нескладні правила в'язання

красивого полотна з плавним переходом кольорів

У статті використані фотографії з Інтернету: джерело «пошук Гугл»

Градієнт - слово від лат. gradiens, Позначає «крокуючий, зростаючий» або напрямок найбільшого зростання певної величини, в нашому випадку - кольори в'язаного полотна. Простіше кажучи, градієнтом називають плавний перехід від одного кольору до іншого, причому самих кольорів і кількість переходів може бути будь-яким. Наприклад, перейти від чорного до білого можна в два кроки, а можна і в 5 або 10 кроків, підбираючи між початковим (чорним) і кінцевим (білим) відтінки від темно-сірого до сріблястого і білосніжного.

Також і з будь-якими іншими квітами і відтінками

У в'язанні різнобарвне полотно використовується в самих різних моделях і фасонах, як для дітей, так і для дорослих.

Загалом, море фантазії і можливостей !!!

Можна пов'язати річ смужками різних кольорів, можна передбачити перехід відтінків в процесі вив'язування візерунка, а можна підкреслити «родзинку» речі тільки через перелив фарб у звичайній лицьовій (або хусткової) гладі.

Для ПЛАВНОГО переходу від одного кольору в інший використовується нескладна техніка поєднання ниток - меланж. Вікіпедія визначає Меланж як «спосіб поєднання і переплетення різнокольорових ниток для в'язання». І ми для виконання полотна градієнтом повинні самостійно меланжіровать вибрані кольори пряжі: все дуже просто, але ефектно і красиво!

Часто в готовому вигляді все одно помітні «лінії переходів», дуже нечіткі і розпливчасті, але візуально видимі.

Якщо виріб в'яжеться з візерунком, наприклад, косами або будь-яким іншим, то «видимість» смужок розпливається, перехід стає менш помітним

Ось більш яскравий приклад для порівняння лицьовій гладі і малюнка

Ні в якому разі не можна сказати, що це некрасиво - це просто факт)) все вироби в такій техніці виглядають дуже класно і ефектно!

АЛЕ! Можна домогтися і майже ідеально плавного переливу кольору, причому в тій же техніці в'язання !!!

Ось, наприклад, дивіться

Насправді все дуже просто - такого ефекту можна досягти двома способами:

1. чим більше використовується півтонів між основними кольорами, тим красивіше результат і менш помітні переходи, тобто використовуючи три кольори, дуже складно домогтися того ж результату, що і 9-ма кольорами пряжі.

Як приклад, маючи 3 мотка * чорний-сірий-білий * перелив буде саме помітними смужками, а при наявності 9 кольорів ниток * чорний / маренго / темно-сірий / сірий / світло-сірий / темно-сріблястий / срібний / брудно-білий / білий / білий *, це буде значно більш плавний градієнт.

1. в'язання більшою кількістю шарів ниток, поступово замінюючи кожну з яких на новий відтінок, буде досягатися саме плавність переходу кольору.

Картинки вище - це другий спосіб однієї і тієї ж техніки в'язання.

Є ще варіант - інша техніка, наприклад, жаккард або малюнок, де різні кольори можна вводити точково, в кожному наступному ряду нарощуючи обсяг нового відтінку і домогтися, отже, поступової, дуже «повільної» зміни кольору.

Ми розглядаємо спосіб в'язання градієнта, де присутня меланжірованіе ниток!

КІЛЬКА ПРАВИЛ для формування «потрібних» кольорів при в'язанні градієнта - меланжірованія.

1.Толщіна пряжі

В процесі в'язання наші нитки будуть поєднуватися в різних поєднаннях, тобто робоча нитка буде ЗАВЖДИ складатися з декількох ниток - можна взяти всього 2 основних кольори пряжі, АЛЕ при цьому від кількості складань буде залежати і ефектність градієнта. Тобто при в'язанні в три нитки перехід буде обов'язково більш помітний, ніж при в'язанні цієї ж пряжею в 6 або більше жмутів.

Тому перше правило класного результату - чим більше кількість складань ниток, тим більше плавним буде перехід відтінків в готовому виробі.

Від цього залежить початковий вибір пряжі - орієнтуйтеся на «підсумкову товщину» нитки (\u003d робоча нитка), якій буде в'язатися полотно в кілька додавань: якщо в мотку 100 м і довжина нитки становить 400-500 м, то в три складання товщина робочої нитки буде досить об'ємною, переходи кольору більш помітні. Для такого ж тришарового варіанту з ниток, кожна з яких довжиною в 700-900 м в 100 г - вже товщина робочої нитки складе більш тонке полотно. Ну а при додаванні в 6-8 ниток для пряжі в 1300-1500 м і більше можна сподіватися на практично «ідеальний» результат градієнта.

Ваш вибір пряжі насамперед має передбачати цей момент!

Але, повторюся, це не означає, що в'язання в 3 складання некрасиво або неефектно - все залежить від бажаної моделі і вашого вибору!

Є три кольори бавовняної пряжі, з яких повинно бути пов'язано градиентное полотно річної кофтинки.

Пряжа 50% бавовна / 50% віскоза, довжина 425 м х 100 м - ниткою в 3 складання я буду в'язати спицями № 3,5 (можливо 4,0 в залежності від індивідуальної щільності в'язання).

Всього 2 основних кольори пряжі - Семенівська «Лідія», 100% шерсть, довжина 1613 м х 100 м, кольору «Темно-синій» і «Айсберг» (бірюзовий). Буде в'язатися шапочка в 8 (!) Складань

Зверніть увагу, що в першому прикладі «смужки» від переходів кольорів помітні, особливо на ділянці зміни меланжірованних і основних ділянок, в тому час як при переході від не надто контрастують відтінків «межа» більш розпливчаста. Тобто при використанні більшого кількості відтінків перелив був би більш плавним навіть при малій кількості складань робочої нитки.

У 2-му прикладі, на полотні шапочки, такий видимої «кордону» кольору немає навіть для різких колірних тонів БЕЗ використання напівтонів.

2. Як меланжіровать нитки

Тобто як формувати «перехідні» кольору ниток.

Основне правило меланжірованія:

є ділянки основних кольорів і є т.зв. меланжірованние ділянки в'язаного полотна. Всі ділянки в'яжуться однаковою кількістю додавань (\u003d робоча нитка): відрізки основних кольорів - це складання ниток тільки основних кольорів, а меланжірованние ділянки - поєднання ниток різних кольорів. Кожен наступний перехід здійснюється за рахунок заміни однієї з ниток в складі робочої нитки на нитку іншого кольору.

Наприклад, при додаванні в 5 ниток, перший перехід буде здійснено заміною однієї з п'яти ниток ниткою іншого кольору \u003d 4 нитки одного кольору + 1 нитку іншого кольору.

Процес в'язання виконується так: пров'язавши певний вертикальний ділянку, міняємо одну з ниток в складі робочої нитки на іншу. В'яжемо наступний вертикальний ділянку і міняємо ще одну нитку в складі робочої на таку ж, якою була перша заміна. І так далі - поступово замінюються всі нитки в складі робочої на інший колір.

2.1. В'яжемо темної пряжею в 3 нитки однакового (бузкового) кольору на потрібну висоту *

* Як визначити відрізок в'язання в висоту для рівномірного розподілу кольорів по довжині вироби - нижче по тексту

Це перша ділянка основного кольору.

2.2. Перший перехід на більш світлу пряжу (рожеву) \u003d перший меланжірованний ділянку. Для цього ми замінюємо одну з трьох ниток нашої робочої нитки на рожеву нитку - отримуємо потрійне складання з двох бузкових і однієї рожевої нитки. Так світліша нитка буде поступово введена в полотно.

2.3. Зв'язавши цей відрізок на потрібну висоту, замінюємо одну нитку з двох, що залишилися бузкових на рожеву - отримуємо потрійне складання з двох рожевих ниток і однієї бузкової.

Отримуємо полотно такого виду

2.5. Аналогічним способом буде виконуватися і перехід від рожевого кольору до білого:

- 2 рожеві нитки + 1 біла

- 1 рожева нитка + 2 білі

- 3 білі нитки

Таким чином, плавний перелив від початкового темного кольору до кінцевого світлого завершено.

Нічого складного і незрозумілого)))

Це приклад для в'язання трьома кольорами. Аналогічним способом будемо меланжіровать і 4 кольори (умовно А, В, С, D), і перехід буде більш плавним, адже відрізки будуть коротшими і розподіляться таким чином:

- 4 нитки А

- 3 нитки А + 1 нитку В

- 2 нитки А + 2 нитки В

- 1 нитка А + 3 нитки В

- 4 нитки В

Відповідно і наступні відрізки переходів

Тепер стає зрозуміло, що, чим більше ниток в складі робочої, тим більше плавним буде перехід, адже заміна відбувається поступово і, отже, введення нового відтінку «менш» помітно. Тому навіть в'язання 2-мя основними кольорами, але в більшій кількості складань робочої нитки дає найефектніший підсумковий результат градієнта - приклад 2))

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

3. Як визначити висоту відрізка переходу (вертикального ділянки полотна)

Якщо ваше виріб буде поступово переходити від одного кольору до іншого, тобто всі відтінки будуть однакової висоти, то заплановану довжину всього виробу (вимірюємо по центру вироби) від верхнього краю (наприклад, горловини кофтинки або денця шапочки) до нижнього краю ділимо на кількість основних кольорів - БЕЗ обліку меланжірованних ділянок.

У наведеному вище прикладі № 1 це 3 частини: бузкова, рожева і біла. Як приклад, візьмемо загальну висоту кофтинки 72 см.

72: 3 \u003d 24 см. Тобто повний перехід від одного основного кольору до іншого повинен становити 24 см. АЛЕ! в кожному такому переході використовується 3 підходи зі зміною ниток \u003d меланжірованние ділянки (3 нитки одного кольору, 2 одного + 1 другого кольору, 1 одного + 2 другого кольору), значить кожен відрізок основного кольору ділимо ще на 3 частини \u003d кожен вертикальний ділянку в'язання, включаючи меланжірованние, становить 8 см. Ну а кількість рядів - це вже залежно від індивідуальної щільності в'язання))

З огляду на фасон, модель і кількість бажаних переходів, ви вже можете змінити на свій вибір, який з переходів повинен мати більшу висоту, а які відрізки будуть менше або однакові. Зокрема, це дуже важливо, якщо кількість пряжі у вас різний: якогось кольору 4 мотка, а інших тільки по 1-му - відповідно один з переходів буде більш «затяжний», а інші - «короткі». Або просто за бажанням один колір (або один меланжірованний ділянку) у вашій моделі повинен складати 2/3 всієї довжини за задумом))

Для в'язання різновисоких ділянок кольорів використовуйте таку схему:

- визначте бажану висоту для кожного відрізка основних ниток

Приклад № 2: для в'язання шапочки робочою ниткою в 8 складань з пряжі двох кольорів: загальна планована висота вироби від нижнього краю до центру денця становитиме 23 см. Висота кожної ділянки основних кольорів - по 7 см, відповідно «середина», тобто . ЗАГАЛЬНА висота всіх меланжірованних ділянок для переходу від одного основного до другого основного кольору складе 9 см.

- загальний меланжірованний ділянку для всіх кольорів розподіліть на кількість переходів

У нашому прикладі це так:

7 ниток А + 1 нитка Б

Тобто за все буде виконано 7 переходів на цій ділянці. Як розраховувалося раніше, загальна висота повинна бути 9 см, відповідно кожен окремий меланжірованний ділянку складе ок. 1,5 см.

Усе. Розрахунки зроблені!

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

Це теж досить тонкий момент в'язання, адже якщо кількість основних кольорів невелике, наприклад, наші 3 кольору в 1-му прикладі, і колор досить контрастний, то, як і говорилося вище, все одно є досить «чітка» лінія розмежування різних відтінків.

Використовуйте правило поступового введення, тобто годі й в'язати відразу весь ряд із заміною однієї нитки, а вводити новий відтінок за рахунок часткового в'язання, наприклад, пров'язавши укороченими рядами невеликий відрізок, перехід вже не буде чітко «горизонтальним».

Або можна використовувати техніку жаккарда, буквально пров'язуючи по 1-2 петлі через 5-6 см в ряду, в наступному відповідно збільшуючи ділянки нового кольору.

Ще один варіант - провязать нової робочої ниткою невелику ділянку ряду, далі провязать також невелику ділянку попереднього відтінку, і знову прочередовать в цьому ж ряду «нову» і «поточну» робочі нитки, наступний ряд повністю провязать попереднім відтінком, наступний - «новим» відтінком : так «злиття» буде не в лінію, а епізодами.

У нашому 1-му прикладі особливо помітно «розмежування» ділянок при введенні білої нитки. Але «морочитися» з жаккардом або укороченими рядами не хочеться)), є 3 контрастні кольори і тільки 3 складання робочої нитки, як і було заплановано.

При в'язанні я використовувала як часткові відрізки в'язання різними робочими нитками (фото вище), так і такий спосіб: перший ряд переходу в'язати в режимі чергування * 2 п. Попереднього кольору (неважливо меланжірованний це ряд або основний) і 2 п. «Нового» кольору *.

При переході на основний ділянку від * 1розовая + 2белие * до * 3 білі нитки * я в'язала так: * 2 п. Поточного меланжірованного кольору, наступні 2 п. Білі * \u003d весь ряд в шаховому порядку, і різні петельки виглядають однаково «строкато» в загальному полотні.

Наступний ряд пров'язаний «новим» кольором - білим. Але, звичайно, можна ще збільшити «висоту» введення «нового» кольору, щоб отримати більш плавний перелив!

На вивороті вироби, якщо в'яжете по 2 петлі різними раб.нітямі, утворюються маленькі протягання, як при в'язанні жакардових візерунків - ви можете не звертати на них уваги, адже вони короткі, але можете використовувати для їх «ліквідації» правила в'язання жаккардом, коли протягання «вплутуються» в поточний ряд.

Загальний вигляд

Приклад 2. Тут у всіх переходах просто виконувалася заміна 1-ої нитки без будь-яких додаткових способів пров'язування

Ось і всі правила для в'язання градієнта. Нескладні і досить ефектні для отримання красивого результату в готовому виробі - в'яжіть різноманітні і дуже акуратні плавні колірні переливи! Сподіваюся, що як результат вашої праці, так і сам процес в'язання буде доставляти тільки одне задоволення!

CSS-градієнти дозволяють зробити фон з двох і більше кольорів, що плавно переходять з одного в інший. Вони з нами вже досить давно, і мають досить непогану підтримку браузерами. Більшість сучасних браузерів розуміє їх без префіксів, для IE9 і старше є Gradient Filter, також для IE9 можна використовувати SVG.

Градієнти можуть бути використані всюди, де використовуються картинки: на полях, як Буллет списків, вони можуть бути задані в content або border-image.

Linear-gradient

Лінійні градієнти досить прості у використанні. Для самого елементарного градієнта досить задати початковий і кінцевий кольори:

Background: linear-gradient (orangered, gold);

Квітів може бути будь-яка кількість більше двох. Також можна управляти напрямком градієнта і кордонами (точками зупинки) квітів.

Напрямок можна задавати градусами або ключовими словами.

Ключовими словами: to top \u003d 0deg; to right \u003d 90deg; to bottom \u003d 180deg - значення за замовчуванням; to left \u003d 270deg.

Ключові слова можна поєднувати між собою, щоб отримати діагональний градієнт, наприклад to top left.

Нижче ви можете побачити як працюють різні напрямки в розтяжці від бузкового до жовтого:

Ось код самого першого квадрата, для прикладу:

Top-left (background: linear-gradient (to top left, purple, crimson, orangered, gold);)

Слід пам'ятати, що to top right не те ж саме, що 45deg. Кольори градієнта розташовуються перпендикулярно лінії напрямку градієнта. При to top right лінія йде з нижнього лівого у верхній правий кут, при 45deg - розташовується строго під цим кутом незалежно від розмірів фігури.

Різниця добре видно на прямокутних фігурах:

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

Приклади завдання значень в%, в em і значення, що виходять за межі елементу:

Чим ближче знаходяться точки зупинки сусідніх квітів, тим чіткіше буде межа між ними. Таким чином можна легко робити смугасті фони:

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

Смужки на тлі сайдбара - ще один градієнт, що складається з чергування повної прозорості та білого кольору з прозорістю 30%. Градієнти з напівпрозорими кольорами зручні тим, що їх можна накласти поверх фону будь-якого кольору.

Градієнт в прикладі заданий складним довгим кодом, тому що смужки повинні розташовуватися тільки над фоном для сайдбара. Якщо не намагатися зробити все фоном для одного блоку, можна було б вирішити задачу за допомогою псевдоелемента.

При відсутності обмежень код може бути набагато коротший:

Light (background: peachpuff linear-gradient (90deg, rgba (255, 255, 255, 0) 50%, rgba (255, 255, 255, .4) 50%) center center / 2em;) .dark (background: steelblue linear-gradient (rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, .2) 50%) center center / 100% 1em;)

У першому рядку задаємо фоновий колір елемента, тип і напрямок (колір і напрям можна опустити), у другій - визначаємо кольору градієнта і кордон між ними, в третьому - задаємо положення і розмір отриманого зображення. Найважливіша частина - розмір. За замовчуванням фон повторюється, тому що вийшов патерн заповнить собою фон елемента. Дуже легко і зрозуміло :)

Вся запис може бути зроблена в один рядок, але для читабельності зручніше писати в кілька, особливо для складних градієнтів.

Також важливо знати, що ключове слово transparent означає прозорий чорний, а не прозорий білий, тому при його використанні в Firefox можна отримати ось таку неприємність:

Щоб цього уникнути, використовуйте повністю прозорі кольору потрібного відтінку, наприклад, білий: rgba (255, 255, 255, 0) або чорний rgba (0, 0, 0, 0). Про різні способи задавати кольори можна почитати.

Щоб дізнатися rgb-нотацію конкретного кольору, можна скористатися CSS.coloratum, Інструментом від Lea Verou.

Крім звичайного linear-gradient можна зробити repeating-linear-gradient - повторюваний градієнт

Приблизний код:

Background: repeating-linear-gradient (green, green .5em, transparent .5em, transparent 1em);

На жаль, повторювані градієнти поводяться як попало і підійдуть тільки для візерунків, яким не важлива точність. Якщо потрібна акуратність, використовуйте linear-gradient в поєднанні з background-size і background-repeat.

Градієнти мають таке ж обмеження, що і box-shadow: їм не можна ставити окремо кольору або напрямок. Це призводить до дублювання коду і гострої потреби скористатися препроцесорів в разі створення складних градієнтів.

Інше обмеження полягає в тому, що градієнти НЕ анімуються, що, втім, можна до якійсь мірі обійти.

Для швидкого створення кросбраузерності градієнтів є дуже зручний інструмент: colorzilla.com/gradient-editor/. Крім коду для сучасних браузерів, він запропонує код для старих IE і SVG для 9-го.

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

CSS-градієнт є переходи від одного кольору до іншого.

Градієнти створюються за допомогою функцій linear-gradient () і radial-gradient ().

Метод найшвидшого фон можна встановлювати в властивості background, background-image, border-image і list-style-image.

Як зробити градієнт в CSS

підтримка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Лінійний градієнт linear-gradient ()

лінійний градієнт створюється за допомогою двох і більше кольорів, для яких заданий напрямок, або лінія градієнта.

Якщо напрямок не вказано, використовується значення за замовчуванням - зверху вниз.

Кольори градієнта за замовчуванням розподіляються рівномірно в напрямку, перпендикулярному лінії градієнта.

Background: linear-gradient (кут / сторона або кут нахилу за допомогою ключового слова (пари ключових слів), перший колір, другий колір і т.д.);

напрямок градієнта може бути задано двома способами:
за допомогою кута нахилу в градусах deg, значення якого визначає кут нахилу лінії всередині елемента.

Div (height: 200px; background: linear-gradient (45deg, #EECFBA, # C5DDE8);)

за допомогою ключових слів to top, to right, to bottom, to left, які відповідають кутку градієнта, рівному 0deg, 90deg, 180deg і 270deg відповідно.

Div (height: 200px; background: linear-gradient (to right, # F6EFD2, # CEAD78);)

Якщо напрямок задано парою ключових слів, наприклад, to top left, то початкова точка градієнта буде розташована в протилежному напрямку, в даному випадку справа внизу.

Div (height: 200px; background: linear-gradient (to top left, powderblue, pink);)

Для нерівномірного розподілу кольорів вказується початкова позиція кожного кольору через точки зупинки градієнта, так звані color stops. точки зупинки задаються в%, де 0% - початкова точка, 100% - кінцева точка, наприклад:

Div (height: 200px; background: linear-gradient (to top, # E4AF9D 20%, # E4E4D8 50%, # A19887 80%);)

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

Div (height: 200px; background: linear-gradient (to right, # FFDDD6 20%, # FFF9ED 20%, # FFF9ED 80%, #DBDBDB 80%);)

2. Радіальний градієнт radial-gradient ()

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

Background: radial-gradient (форма градієнта / розмір / позиція центру, перший колір, другий колір і т.д.);

форма градієнта визначається ключовими словами circle або ellipse. Якщо форма не задана, за умовчанням радіальний градієнт приймає форму еліпса.

Div (height: 200px; background: radial-gradient (white, # FFA9A1);)

позиція центру задається за допомогою ключових слів, які використовуються у властивості background-position, з додаванням приставки at. Якщо позиція центру не задана, використовується значення за замовчуванням at center.

Div (height: 200px; background: radial-gradient (at top, #FEFFFF, # A7CECC);)

За допомогою пари значень, зазначених в одиницях довжини%, em або px, можна керувати розміром еліпсоподібну градієнта. Перше значення задає ширину еліпса, друге - висоту.

Div (height: 200px; background: radial-gradient (40% 50%, # FAECD5, # CAE4D8);)

Розмір градієнта задається за допомогою ключових слів. Значення за замовчуванням farthest-corner (до дальнього кута).

За допомогою радіального градієнта можна створювати реалістичні об'ємні фігури, такі як м'ячі, кнопки.

м'яч

кнопка

Поштова марка

Використовуючи в градієнтах прозорий колір, можна створювати ось такі ефекти.

Jpg "\u003e