CSS3 линейни градиенти

В последните години използването на градиенти в компютърната графика стана много модерно. В тази публикация ще се спра на най-използваните – линейни градиенти.

Спомняме си как Instagram създаде тенденцията, с преобразуването на логото си през 2016 г., използвайки градиенти по начин, по които никой преди това не беше ползвал.

Сега е много по-леснo създаването им с помощта на езика за програмиране CSS3 и новите му свойства, които дават повече свобода на уеб дизайнерите. Те имат възможност да създават градиентен цветен пълнеж, различни текстури и фонове без изображения.

Какво е градиент ?

В компютърната графика градиентът е набор от цветове, които са поставени един до друг според конкретни критерии, за да генерират ефект на преливане. Цветовете, произведени от градиент, се променят непрекъснато с позицията, което води до красивите плавни цветови преходи.

CSS дефинира три вида градиенти:

• Линейни градиенти (изображения, състоящи се от прогресивен преход между два или повече цвята по права линия – надолу, нагоре, на ляво, на дясно, по диагонал).
• Радиални градиенти (определени от централна точка, крайна форма и две или повече color-stop точки).
• Конични градиенти (позволяват цветови преходи около центъра, вместо да се излъчват от него).

(На тази страница вече имам предвид само линейни градиенти.)

Как да създадем един градиент?

Най-известните графични програми (като Photoshop, Adobe Illustrator или Gimp) интегрират специални инструменти, които позволяват да прилагаме, създаваме и променяме градиенти. Друга възможност е, да се използват онлайн инструменти като тези, който са на разположение в края на тази страница или да се създават чрез ръчно написан код, използвайки програмните езици HTML и CSS3.

Използване на градиентите като background

Като нова функция  в CSS3 се появява възможността да се определи градиент като свойство на фона (background) (преди това нововъведение, въпросното свойство можеше да приеме само URL адреса на файла с изображение като стойност).
С други думи, можем да използваме градиентите като фон, страница или кутия (box).
Тъй като градиентите са фонови изображения, трябва да посочим цвета на фона.

Градиентите принадлежат към типа image данни, те могат да се използват само там, където image може да се използва. Поради тази причина linear-gradient() няма да работи с background-color и други свойства, които използват типа color данни.

За старите браузъри

За да предотвратим възможността по-старите браузъри да показват бял текст на бял фон на страницата ни, можем да създадем резервен цвят с background-color: или background:, така че текстът да остане четлив. В модерните браузъри градиентът ще скрие цвета.

Тези 2 реда, оградени в червено, са резервата за всеки браузър, който няма възможност за градиенти.

• Линия 1 установява flat цвят на фона.
• Линия 2 задава резервното фоново изображение.

Линия 3 задава фоново изображение и градиент за браузърите, които могат да се справят с тях.

• Линия 3 е за всички сравнително модерни браузъри.

Синтаксис

Синтаксисът е доста ясен и е даден на страниците на background или background-image свойствата в CSS. По същество той гласи така:

Създайте фоново изображение, което е линеен градиент, който се движи [в тази посока или под този ъгъл] и започва с[един цвят] и завършва с [друг цвят].

Най-често срещаната форма на градиенти са:

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

При тях имаме постепенен преход от начален цвят към окончателен цвят, следвайки определена линейна посока.

Ако вземем два цвята и определим посоката, можем да създадем интерполация между двата цвята, които идентифицират всички нюанси междутях.
Например, ако зададем първия цвят син, вторият – червен, градиентът ще покаже всички нюанси, които са между двата първоначални цвята.

Параметрите са: началният и крайният цвят.

Имаме възможност да изберем и направлението. Този параметър го вмъкваме преди началния цвят.

Ако оставим градиента без направление, по подразбиране то ще е отгоре надолу.

Разглеждам следния Пример 2:

See the Pen example4 by Ivanka Grigorova (@Ivy2018) on CodePen.

В него сложих посока на дясно (to right).

Поглед върху синтаксиса на атрибута линеен градиент ни дава серия от стойности:

background: linear-gradient(direction, color-stop1 offset1, color-stop2 offset2, ...);

посока (direction): може да бъде ъгъл или страна. Възможните стойности за посока по хоризонтала, вертикала или диагонал са:

• to top
• to top left
• to top right
• to bottom
• to bottom left
• to bottom right
• to left
• to right.

Посоката може да се зададе и чрез конкретни стойности за ъгъл в градуси, следвани от deg. Например: 60deg. Определя ъгъла на наклон на линията на градиента вътре в елемента (ъгъл между хоризонталната линия и линията на градиента).

Стойностите по-горе можем да представим и така:

• to top или 0deg
• to right или 90deg
• to bottom или 180deg
• to left или 270deg.

Когато е пропуснат ъгъла, означава, че е 0deg. Ако зададеният ъгъл е положителен, той е в посока на въртенето на часовниковата стрелка. Ако е отрицателен, то направлението е в обратна послока на часовниковата стрелка.

(adsbygoogle = window.adsbygoogle || []).push({});
 

Ако аргументът посочва ъгъл на кутията, като например to top left, наклонът трябва да бъде под ъгъл, така че да сочи в същия квадрант на посочената ъглова точка и да е перпендикулярен на линия, пресичаща двата съседни ъгъла на градиентната кутия.

Започвайки от центъра на градиента, удължаваме линията с указания ъгъл и в двете посоки. Крайната точка е точката на линията на градиента, в която става пресичането с линията, начертана перпендикулярно на линията на градиента, минаваща през точката на ъгъла на кутията на градиента в определената посока. Началната точка се определя идентично, но в обратната посока.

Забелязваме, че въпреки че началната точка и крайната точка са извън кутията, те са разположени точно така, че градиентът е чисто червен точно на ъгъла и чисто зелен точно в противоположния ъгъл. Това е вярно за линейните градиенти.

цвят и отместване (color and offset): могат да бъдат предвидени две или повече двойки стойности на цвят / отместване.

С помощта на CSS можем да използваме конвенционалното им име, шестнадесетичния им код, RGB или HSL кода им:

• Color Name,
• Hex Color Code,
• RGB (RGBA) Color Code,
• HSL (HSLA) Color Code.

Методът RGB е най-разпространеният в сферата на графиката и се състои в посочването на количествата на трите основни цвята червено, зелено и синьо (Red, Green, Blue), благодарение на които може да се получат други цветове на хроматичната скала.

Шестнадесетичното отбелязване (често използвано в уеб публикуването) е различният начин за изразяване на стойностите на RGB, където те от 0 до 255 са съответно от „00“ до „FF“. (Ето един онлайн инструмент за лесно преобразуване от Hexadecimal до RGB и обратно).

HSL цветовите стойности изразяват нюанса, наситеността и осветеността. Стойностите на цветовете на HSL са определени с: hsl (hue, saturation, lightness).
Нюансът е от 0 до 360, където 0 е червен, 120 е зелен, 240 е син.
Наситеността е процентна стойност: 0% означава нюанс на сивото и 100% е пълен цвят.
Осветеността е също процент: 0% е черно, 100% е бяло.

Отместването е стойност, изразена в проценти или десетично число (от 0,0 до 1,0), или в брой пиксели (px), които определят началната точка на цвета по линията на градиента. По премълчаване се приема равномерно разпределение на началните точки на изброените цветове.

Ако цветовете са два, най-очевидните проценти са 0% и 100%.

Като отбележим по следния начин:

• А – ъгълът (във всеки квадрант), определящ посоката на линията на градиента така, че 0 градуса са нагоре и положителните ъгли да представляват въртене по посока на часовниковата стрелка,
• W – ширината на градиента кутия,
• H – височината на градиента,

тогава дължината на градиента (между началната и крайната точка) е:
abs(W * sin(A)) + abs(H * cos(A))

Примери на разнопосочни линейни градиенти

Ще разгледам няколко примера за това, как можем да използваме линейните градиенти в различни посоки.

Линеен градиент многоцветен, to right

В следния Пример 5, са използвани няколко стоп цвята, без да задавам отмествания. Браузерът ги изчислява сам, както и всички цветове между спирките. Посоката е хоризонтална, от ляво на дясно. Цветовете се представени със своя шестнадесетичен код, с rgb код, или с името си.

See the Pen example3 by Ivanka Grigorova (@Ivy2018) on CodePen.

Линеен градиент с вертикално разположени цветни стопове

Пример 6 на бутон с цветни стопове отгоре надолу по премълчаване с преливане на два цвята на сиво.

See the Pen example9 by Ivanka Grigorova (@Ivy2018) on CodePen.

Линеен градиент със зададени отмествания на цветните стопове

Ако погледнем CSS3 кода на градиента на Пример 2, ще забележим зададените отмествания. Започва се с оранжев цвят, на 20% от градиентната линия имаме цветен стоп на цикламен цвят. На 40% – на ярък лилав цвят, на 250 пиксела от началото – на цвят циан, на 300 пиксела от началото – на жълт и завършваме на 100% от градиентната линия със зелен цвят. Отместванията са зададени в проценти или в пиксели (px).

Линеен градиент с диагонално разположени цветни стопове

В Пример 7 виждаме диагонално разположение на цветните стопове, от горе вдясно в посока надолу вляво (to bottom left). Започва със синьо и завършва с бяло.

See the Pen example2 by Ivanka Grigorova (@Ivy2018) on CodePen.

Пример 8 – отново диагонално разположени цветни стопове. Започват долу вляво и отиват горе вдясно (to top right), като следват червено, оранжево и синьо.

See the Pen example1 by Ivanka Grigorova (@Ivy2018) on CodePen.

Пример 9 – Диагонално разположени цветови стопове с посока на 60 градуса обратно на часовниковата стрелка, т.е. ъгъл -60deg.

Диагоналните градиенти със зададени точни ъгли като горния, ни дават по-голяма възможност за контрол на посоката.

Пример 10 с бутон с диагонално разположени цветни стопове to bottom right в 4 различни нюанса на червено.

See the Pen example10 by Ivanka Grigorova (@Ivy2018) on CodePen.

Линеен диагонален градиент с текст

Със следния Пример 11 показвам как можем да използваме диагонален линеен градиент като фоново изображение на наш текст.

See the Pen example13 by Ivanka Grigorova (@Ivy2018) on CodePen.

Обобщено представяне на посоки на линеен градиент

В Пример 12 са представени на едно място линейни градиенти с различни посоки на градиентната линия.

See the Pen example6 by Ivanka Grigorova (@Ivy2018) on CodePen.

Използване на прозрачност

CSS градиентите поддържат и прозрачност, която може да се използва за създаване на ефекта на избледняване на цветовете.

За да добавим прозрачност, използваме функцията rgba () за дефиниране на цветните стопове. Последният параметър в нея може да бъде стойност от 0 до 1 и определя прозрачността на цвета: 0 показва пълна прозрачност, 1 показва пълен цвят (няма прозрачност).

Следният Пример 13 показва линеен градиент, който започва отляво с пълен червен цвят и отива на дясно с полупрозрачност (0.5).

Градиенти на прозрачност

В горния Пример 13 използваме 4-каналното RGBA кодиране на цветове, с алфа канална стойност 1 в началото на градиента и 0.5 в края. Друго нищо не се променя.

С използване на различни степени на прозрачност можем да създаваме и нелинейно преливане на различни цветове, както е в Пример 14:

See the Pen example14 by Ivanka Grigorova (@Ivy2018) on CodePen.

За използване на прозрачност в съчетание с изображение виж по-надолу в Пример 20.

Повтарящи се линейни градиенти

Вместо linear-gradient, който не поддържа автоматично повтарящи се цветни стопове, можем да използваме repeating-linear-gradient: той повтаря стойностите на цвета и то безкрайно. Използване на повтаряне чрез пиксели и други единици може да създаде някои интересни ефекти. Пример 15:

Тук започваме с ярко пълен червен цвят, преминавайки към по-тъмно червено след 20 пиксела, след което се връщаме към червеното на 40 пиксела. Тогава, тъй като е повтарящ се градиент, той продължава да повтаря този модел до края на бутона.

See the Pen example11 by Ivanka Grigorova (@Ivy2018) on CodePen.

Пример 16:

JS Bin on jsbin.com

Ето интересните Пример 17 и Пример 18 с използване на повтарящи се градиенти и свойствata transparent и rgba за прозрачност:

Пример 18

See the Pen example15 by Ivanka Grigorova (@Ivy2018) on CodePen.

Твърди цветни стопове

Примери за непреливащи се твърди цветове са интересните дизайни в горните Пример 17 и Пример 18.

Ние си представяме винаги градиентите като избледняващи цветове, но можем да подчиним цветните стопове така, че да създадем поредица от твърди цветове без преливания. Ако имаме два цветни стопа, на еднакво разстояние по градиентната линия, можем да направим твърд цвят незабавно да премине към друг твърд пълен цвят. При всяко повторение позициите на цветните стопове се изместват с множител по дължината на основния линеен градиент. По този начин позицията на всеки краен цветен стоп съвпада с предния цветен стоп; ако стойностите на цветовете са различни, това ще доведе до остър визуален преход, което може да ни бъде полезно например  за създаване на фон в пълен размер, който симулира колони или ивици – Пример 19:

See the Pen example7 by Ivanka Grigorova (@Ivy2018) on CodePen.

Градиент върху изображение

Често виждаме този интересен ефект на наслагване на градиенти върху изображение. Виж Пример 1 и Пример 20:

See the Pen example12 by Ivanka Grigorova (@Ivy2018) on CodePen.

Използваме свойствата transparent и rgba.

Онлайн инструменти за генериране на градиенти

От написаното досега се разбира, че е не е толкова лесно да се създаде перфектния градиент, като се разчита на писане на код. Много по-лесно е да имаме визуална референция по време на фазата на създаване. Ето защо изброявам и няколко автоматични инструменти за генериране на CSS3 градиенти.

Те обикновено са много прости за употреба, като позволяват да определим типа градиент, цветовете, точки на произход, офсет и т.н. В края на процедурата остава само копирането и поставянето на кода в необходимото ни място в CSS.

Colorzilla.com

Cssmatic.com

Мycolor.space

Тestdrive-archive.azurewebsites.net

Аngrytools.com

Gradientgenerator.com

Интересно за комбинациите от цветове: Как да изберем комбинация от цветове за проекта си

Заключение

Хубаво е, след като са научени теоретичните основи, да се разчита на подобни като горните инструменти за практикуване и за генериране на кода за градиенти на CSS3.

Градиентите  могат да се използват навсякъде, където бихме използвали image, като например за фон. Тъй като те се генерират динамично от браузъра и могат да бъдат преоразмерявани в движение, то изглеждат по-добре от използваните преди това за тези цели растерни изображения.

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

Източник на основното изображение Pixabay.com.