Да си направим красиви градиенти с помощта на CSS
Да погледнем този линеен градиент, основан благодарение на, който се трансформира от чисто жълт до чисто наследник цвят:
Забелязахте ли, че в центъра той наподобява бледен и някак замърсен?
Този резултат известният графичен дизайнер Ерик Кенеди назова „ Мъртвата зона на сивото „. Ако ни изберете по-внимателно цветовете за своите градиенти, то в градиентите, направени благодарение на CSS нормално поражда точно такава безцветна част в средата.
Оказа се, че е допустимо напълно да избегнем и да се избавим от тази мъртва зона на сивото. В тази публикация ще покажа за какво поражда този резултат и по какъв начин можем да използваме теорията на цветовете за основаването на наситени и ярки градиенти, които наподобяват доста добре в цялата си дължина.
Пресмятането на градиентите
Задавали ли сте си въпроса, по какъв начин съответно работи логаритъмът linear-gradient при CSS? Как се пресмята съответното значение на цветовете за всеки пиксел от спектъра?
Ще обясня. Алгоритъмът го пресмята, като взема математически междинното значение за всеки един от трите цветови канала: Red, Green и Blue.
В оригинала изображенията са интерактивни
В цветовото пространство RGB ние сътворяваме разнообразни цветове посредством разбъркване на трите съществени канала – аления, зеления и синия. Всеки един канал има диапазон от смисли от 0 до 255.
Ако увеличим до най-много смисъла на всичките три канала – 255 / 255 / 255, ще получим чисто бял цвят. Ако зададем на всеки канал 0, ще получим черен – неявяване на цвят.
От друга страна, в случай че и на трите канала дадем еднообразно значение, то резултатът постоянно ще бъде сив цвят с разнообразни оттенъци.
В показания нагоре образец на градиент ние започваме с чисто жълт цвят (255/255/0). При преместването по градиента започваме да прибавяме наследник цвят (0/0/255). И когато достигнем средата, ние махаме половината от жълтия и прибавяме половината от синия.
С други думи и трите канала по средата имат еднообразно значение от 127,5. Това е сив цвят.
На мен ми наподобява прекомерно необичайно, че междинното сред синьото и жълтото може да бъде сиво. Когато смесим два доста наситени цвята, ненадейно получаваме нещо напълно неясно. Тук липсва способ за смесването единствено на пигмента, като наситеността би трябвало да остане същата…
Алтернативните цветови модели
Има редица най-различни способи и способи за задаване на цветовете. Дотук използвахме единствено R/G/B и почтено казано, този цветови модел не е доста сполучлив.
Нека да се спрем върху HSL цветовия модел .
HSL значи Hue / Saturation / Lightness или Отенък / Наситеност / Яркост. Ако сте употребявали селектор на цветовете, то най-вероятно сте работили точно с това цветово пространство.
Ето какво значи всеки параметър:
Hue (Отенък, от време на време Нюанс) – управлява къде в цветовата канара се намира пигментът Saturation (Наситеност) – регулира интензивността на цвета Lightness (Яркост) – управлява какъв брой ярък или мрачен да бъде съответния цвят
Лично на мен този способ ми наподобява доста по-интуитивен метод за разбиране на цветовете.
Но ето какво е в действителност вълшебно: какво ще стане, в случай че вместо да използваме смислите в RGB цветовото пространство в нашите градиенти стартираме да използваме параметрите на HSL?
Веднага се вижда, че мъртва зона повече няма, тъй като този път не използваме R/G/B параметрите, а H/S/L смислите.
Цветовете първоначално и края имат идентична плътност бляскавост, тъй като единственото което се трансформира е отенъкът (Hue). Останалите два параметъра не се трансформират (100, 50). В последна сметка се получава по този начин, че ние просто се придвижваме по скалата на цветовете.
Ето още един образец, в който използваме разбъркване на цветове с друга плътност и осветеност. За съпоставяне са показани и цветовете при потреблението на RGB пространството:
Разликата е явна, нали?
Но и HSL надалеч не постоянно е най-хубавият цветови модел за всяка обстановка. При потреблението на това цветово пространство неведнъж се получават прекомерно ярки и живи градиенти, тъй като не са взети поради особеностите на човешкото усещане.
Според HSL цветовия модел, следните двата квадрата имат идентична бляскавост:
Хората не постоянно възприемат цветовете еднообразно. Повечето хора биха споделили че жълтият цвят нагоре наподобява доста по-светъл в съпоставяне със синия, макар идентичното значение на яркостта. Това е по този начин, тъй като HSL моделът не включва информация за това по какъв начин хората възприемат цветовете. Този модел се базира на чиста физика – сила и дължини на вълните, което въпреки това си има своите позитивни черти.
За благополучие има редица други цветови модели, които вземат поради човешкото разбиране на цветовете. Така да вземем за пример, HCL моделът доста наподобява на HSL, само че е моделиран по подобен метод, че регистрира особеностите на човешкото зрение:
Кой следователно е най-хубавият цветови модел? Това мощно зависи от резултата, който желаете да постигнете. Аз обичам да опитвам с най-различни цветови модели, с цел да намеря оптималното решение за съответния градиент.
Да използван наученото на практика
Имам както положителни, по този начин и неприятни вести. Да стартираме с неприятните.
CSS не ни дава опция за избор на цветови модел при изчисляването на градиентите. Това значи, че ние не можем да изберем HSL интерполацията за съответен градиент, най-малко към този момент. Доколкото ми е известно CSS Images Level 4 дава опция за оказване на метода за интерполиране на цветовете, единствено че не се поддържа от всички.
Има и положителни вести: можем да постъпим хитро и да заобиколим тези ограничавания.
Градиентите в CSS не са лимитирани до потреблението единствено на два цвята. Могат да бъдат употребявани 3, а за какво не 10 или даже 100 цвята.
В началото ще би трябвало ръчно да изчислим набора междинни цветове. Можем да създадем това благодарение на JavaScript, с цел да можем да използваме нужния в съответен случай цветови модел. Това най-лесно може да стане благодарение на потребната библиотека chroma.js или някоя друга.
След това взимаме този комплект от цветове и подаваме всяко от техните смисли на функционалността за градиент при CSS:
.box { background-image: linear-gradient( to right, #ffff00, #f8ea47, #f0d465, #f0d465, #e7bf7c, #ddaa8f, #d095a1, #c280b2, #b26cc2, #9d56d2, #8440e1, #6028f0, #0000ff ) }
Тук използваме линейни градиенти, само че същият трик работи с радиални и конични градиенти.
Но чакайте малко, белким CSS енджина не употребява RGB интерполация за пресмятане на цветовото пространство сред всеки един сред указаните цветове ? Ако ние не подадем стотици цветове, нужни за всеки един обособен пиксел, то тогава енджинът явно интерполира тези междинни смисли.
Това е истина, само че няма изключително значение.
Когато два цвята са доста близки един до различен на процедура не е значимо какъв тъкмо цветови модел се употребява. В този случай градиентът се получава почти идентичен. Дотолкова почти, че човешкото око не може да открие разликите.
Ето един градиент в който се употребяват два почти идентични цвята:
Цветовете дотолкоз си наподобяват и са близки, че RGB интерполацията не може да скапе изображенията.
И по този начин нашият остроумен трик е в това, да се генерира комплект от междинни точки от определен цветови модел, които по-късно да се подадат като параметри във функционалността за градиентна CSS. Самият CSS енджин употребява RGB интерполация, само че това не оказва въздействие на крайния резултат. Всъщност оказва въздействие, само че това не може да бъде видян от хората.
Остана най-интересното. Нека да кажем няколко думи по какъв начин става автоматизираното генериране на сходни градиенти.
Генераторът на градиенти
Аз сътворих софтуерен инструмент, който дава опция за генериране на луксозни и красиви градиенти, които могат да се употребяват в CSS:
Аз съм във екстаз от. В него се употребяват всички детайли, за които стана дума в тази публикация, както и някои спомагателни трикове по разпределението на.
Можете да настройвате всички цветове, до момента в който не се получи нужния резултат, а по-късно да копирате и вмъкнете в своя код фрагмента от CSS кода, който се демонстрира в долния десен ъгъл. Засега инструментът генерира единствено линейни градиенти, само че всеки може да копира и сложи комплекта от цветове в CSS и без проблем да ги употребява в радиалните и коничните градиенти!
Забелязахте ли, че в центъра той наподобява бледен и някак замърсен?
Този резултат известният графичен дизайнер Ерик Кенеди назова „ Мъртвата зона на сивото „. Ако ни изберете по-внимателно цветовете за своите градиенти, то в градиентите, направени благодарение на CSS нормално поражда точно такава безцветна част в средата.
Оказа се, че е допустимо напълно да избегнем и да се избавим от тази мъртва зона на сивото. В тази публикация ще покажа за какво поражда този резултат и по какъв начин можем да използваме теорията на цветовете за основаването на наситени и ярки градиенти, които наподобяват доста добре в цялата си дължина.
Пресмятането на градиентите
Задавали ли сте си въпроса, по какъв начин съответно работи логаритъмът linear-gradient при CSS? Как се пресмята съответното значение на цветовете за всеки пиксел от спектъра?
Ще обясня. Алгоритъмът го пресмята, като взема математически междинното значение за всеки един от трите цветови канала: Red, Green и Blue.
В оригинала изображенията са интерактивни
В цветовото пространство RGB ние сътворяваме разнообразни цветове посредством разбъркване на трите съществени канала – аления, зеления и синия. Всеки един канал има диапазон от смисли от 0 до 255.
Ако увеличим до най-много смисъла на всичките три канала – 255 / 255 / 255, ще получим чисто бял цвят. Ако зададем на всеки канал 0, ще получим черен – неявяване на цвят.
От друга страна, в случай че и на трите канала дадем еднообразно значение, то резултатът постоянно ще бъде сив цвят с разнообразни оттенъци.
В показания нагоре образец на градиент ние започваме с чисто жълт цвят (255/255/0). При преместването по градиента започваме да прибавяме наследник цвят (0/0/255). И когато достигнем средата, ние махаме половината от жълтия и прибавяме половината от синия.
С други думи и трите канала по средата имат еднообразно значение от 127,5. Това е сив цвят.
На мен ми наподобява прекомерно необичайно, че междинното сред синьото и жълтото може да бъде сиво. Когато смесим два доста наситени цвята, ненадейно получаваме нещо напълно неясно. Тук липсва способ за смесването единствено на пигмента, като наситеността би трябвало да остане същата…
Алтернативните цветови модели
Има редица най-различни способи и способи за задаване на цветовете. Дотук използвахме единствено R/G/B и почтено казано, този цветови модел не е доста сполучлив.
Нека да се спрем върху HSL цветовия модел .
HSL значи Hue / Saturation / Lightness или Отенък / Наситеност / Яркост. Ако сте употребявали селектор на цветовете, то най-вероятно сте работили точно с това цветово пространство.
Ето какво значи всеки параметър:
Hue (Отенък, от време на време Нюанс) – управлява къде в цветовата канара се намира пигментът Saturation (Наситеност) – регулира интензивността на цвета Lightness (Яркост) – управлява какъв брой ярък или мрачен да бъде съответния цвят
Лично на мен този способ ми наподобява доста по-интуитивен метод за разбиране на цветовете.
Но ето какво е в действителност вълшебно: какво ще стане, в случай че вместо да използваме смислите в RGB цветовото пространство в нашите градиенти стартираме да използваме параметрите на HSL?
Веднага се вижда, че мъртва зона повече няма, тъй като този път не използваме R/G/B параметрите, а H/S/L смислите.
Цветовете първоначално и края имат идентична плътност бляскавост, тъй като единственото което се трансформира е отенъкът (Hue). Останалите два параметъра не се трансформират (100, 50). В последна сметка се получава по този начин, че ние просто се придвижваме по скалата на цветовете.
Ето още един образец, в който използваме разбъркване на цветове с друга плътност и осветеност. За съпоставяне са показани и цветовете при потреблението на RGB пространството:
Разликата е явна, нали?
Но и HSL надалеч не постоянно е най-хубавият цветови модел за всяка обстановка. При потреблението на това цветово пространство неведнъж се получават прекомерно ярки и живи градиенти, тъй като не са взети поради особеностите на човешкото усещане.
Според HSL цветовия модел, следните двата квадрата имат идентична бляскавост:
Хората не постоянно възприемат цветовете еднообразно. Повечето хора биха споделили че жълтият цвят нагоре наподобява доста по-светъл в съпоставяне със синия, макар идентичното значение на яркостта. Това е по този начин, тъй като HSL моделът не включва информация за това по какъв начин хората възприемат цветовете. Този модел се базира на чиста физика – сила и дължини на вълните, което въпреки това си има своите позитивни черти.
За благополучие има редица други цветови модели, които вземат поради човешкото разбиране на цветовете. Така да вземем за пример, HCL моделът доста наподобява на HSL, само че е моделиран по подобен метод, че регистрира особеностите на човешкото зрение:
Кой следователно е най-хубавият цветови модел? Това мощно зависи от резултата, който желаете да постигнете. Аз обичам да опитвам с най-различни цветови модели, с цел да намеря оптималното решение за съответния градиент.
Да използван наученото на практика
Имам както положителни, по този начин и неприятни вести. Да стартираме с неприятните.
CSS не ни дава опция за избор на цветови модел при изчисляването на градиентите. Това значи, че ние не можем да изберем HSL интерполацията за съответен градиент, най-малко към този момент. Доколкото ми е известно CSS Images Level 4 дава опция за оказване на метода за интерполиране на цветовете, единствено че не се поддържа от всички.
Има и положителни вести: можем да постъпим хитро и да заобиколим тези ограничавания.
Градиентите в CSS не са лимитирани до потреблението единствено на два цвята. Могат да бъдат употребявани 3, а за какво не 10 или даже 100 цвята.
В началото ще би трябвало ръчно да изчислим набора междинни цветове. Можем да създадем това благодарение на JavaScript, с цел да можем да използваме нужния в съответен случай цветови модел. Това най-лесно може да стане благодарение на потребната библиотека chroma.js или някоя друга.
След това взимаме този комплект от цветове и подаваме всяко от техните смисли на функционалността за градиент при CSS:
Тук използваме линейни градиенти, само че същият трик работи с радиални и конични градиенти.
Но чакайте малко, белким CSS енджина не употребява RGB интерполация за пресмятане на цветовото пространство сред всеки един сред указаните цветове ? Ако ние не подадем стотици цветове, нужни за всеки един обособен пиксел, то тогава енджинът явно интерполира тези междинни смисли.
Това е истина, само че няма изключително значение.
Когато два цвята са доста близки един до различен на процедура не е значимо какъв тъкмо цветови модел се употребява. В този случай градиентът се получава почти идентичен. Дотолкова почти, че човешкото око не може да открие разликите.
Ето един градиент в който се употребяват два почти идентични цвята:
Цветовете дотолкоз си наподобяват и са близки, че RGB интерполацията не може да скапе изображенията.
И по този начин нашият остроумен трик е в това, да се генерира комплект от междинни точки от определен цветови модел, които по-късно да се подадат като параметри във функционалността за градиентна CSS. Самият CSS енджин употребява RGB интерполация, само че това не оказва въздействие на крайния резултат. Всъщност оказва въздействие, само че това не може да бъде видян от хората.
Остана най-интересното. Нека да кажем няколко думи по какъв начин става автоматизираното генериране на сходни градиенти.
Генераторът на градиенти
Аз сътворих софтуерен инструмент, който дава опция за генериране на луксозни и красиви градиенти, които могат да се употребяват в CSS:
Аз съм във екстаз от. В него се употребяват всички детайли, за които стана дума в тази публикация, както и някои спомагателни трикове по разпределението на.
Можете да настройвате всички цветове, до момента в който не се получи нужния резултат, а по-късно да копирате и вмъкнете в своя код фрагмента от CSS кода, който се демонстрира в долния десен ъгъл. Засега инструментът генерира единствено линейни градиенти, само че всеки може да копира и сложи комплекта от цветове в CSS и без проблем да ги употребява в радиалните и коничните градиенти!
Източник: kaldata.com
КОМЕНТАРИ