Плыўныя пераходы колеру: CSS gradient

Натуральная каляровая гама звычайна раўнамерна-плыўная. Але нават на ідэальна роўных паверхнях аднаго суцэльнага колеру утвараюцца натуральныя каляровыя пераходы. Заўсёды ненаўмыснае падзенне сонечных прамянёў ці штучнага асвятлення, а таксама змена кута зроку дае нераўнамерныя і ўнікальныя адценні.

Два пункты гледжання, накіраваныя на адзін і той жа прадмет, ўспрымаюць яго колер адпаведна розніцы іх кутоў бачання і суадносіны з кутамі падзення іншых прамянёў на аглядаць паверхню.

Псіхалагічныя эфекты каляровых пераходаў

Колер выклікае не толькі фізічныя адчуванні і залежыць не толькі ад часу і становішча ў прасторы. Малюнка дрэў, хат, гор і іншых прадметаў у перавернутым становішчы выклікаюць адчуванне адлюстравання ў воднай роўнядзі або на іншай паверхні.

Абсалютна чорныя паралельныя лініі на ідэальна белай паверхні сцяны, кожная прамая па ўсёй даўжыні павялічваецца ў таўшчыні прапарцыйна натуральнаму памяншэння таўшчыні лініі пры поглядзе на сцяну - усё гэта выкліча адчуванне ў таго, хто глядзіць, што памяшканне мае гарызантальны столь.

Адзін малюнак, на якім нанесеныя два, і кожнае з іх зрушана сябар адносна сябра на адлегласць паміж вачыма, дае прасторавы эфект аб'ёму, калі расфокусировать погляд.

Калі плакат досыць вялікі і межы пераходу ў рэальную рэчаіснасць выкананы ідэальна, то намаляванае на плакаце будзе ўспрымацца гэтак натуральна, што патрэбныя адценні колеру, свядомасць таго, хто глядзіць падключыць аўтаматычна.

Сайт, а перш за ўсё, яго дызайн і колеравая схема маюць важнае значэнне і дапаўняюць логіку рэсурсу, яго дыялог, вырабляюць належны псіхалагічны эфект на наведвальніка.

Плыўныя пераходы з дапамогай CSS

Градыенты ствараюцца з дапамогай функцый linear-gradient () і radial-gradient (). У першым выпадку плаўнае змяненне колеру адбываецца па лініі, у другім выпадку - па эліпсе або акружнасці. CSS gradient можна ўсталёўваць ва ўласцівасцях background, background-image, border-image, list-style-image. Накладваючы элементы адзін на аднаго, вызначаючы іх празрыстасць можна фармаваць цудоўныя адценні колеру і ствараць унікальныя пераходы.

Варта, аднак, улічваць, што каляровай пераход не заўсёды можа быць плыўным. Некаторыя варыянты спалучэння колераў, значэння празрыстасці, афармленне фону старонкі могуць даць непажаданыя, ступеністыя эфекты.

Правілы запісу CSS background gradient

Градыент ўяўляе сабой плыўны пераход ад аднаго колеру да іншага. Пры гэтым можна выкарыстоўваць некалькі кветак. Указанне лінейнага варыянту (CSS linear gradient) можа быць разнастайным:

Першым параметрам ідзе кут нахілу або бок вобласці, затым ідуць колеру. Не абавязкова выкарыстоўваць толькі два колеры, можна намаляваць ўсю вясёлку. Ужываючы ўласцівасць празрыстасці opacity можна атрымліваць эфекты накладання.

Выбар колеру, генератары колеру

Творчая частка працы дызайнера, распрацоўніка сайта ў апошнія гады спрасцілася. Сталі практычнымі і мэтазгоднымі прастакутныя формы, якія змяшчаюць мінімум інфармацыі, мінімум функцый, максімум сэнсу і псіхалагічную ўстаноўку прадаць тавар, аказаць паслугу, асабліва адзначыць зніжкі, якасць і / або істотныя адрозненні ад канкурэнтаў.

Аднак нават у такім цвёрдым рэгламенце і ўмовах стварэння сучасных вэб-рэсурсаў знаходзіцца месца для творчасці і выразнае жаданне некаторых распрацоўнікаў рабіць агрэсіўную, мэтавую працу з колерам, якая адлюстроўвае сэнс тэкставага кантэнту і стыль абранага дыялогу. CSS gradient стаў часцей прымяняцца.

Каляровыя рашэнні "Гугла" і "Скайпа", у прыватнасці, мелі эфект і паслядоўнікаў, аднак, у апошнія пару гадоў актыўная складнік вэб-дызайну пачала шукаць новыя формы, новыя каляровыя рашэнні і спрабаваць ненадакучліва дынаміку плыўных формаў.

У інтэрнэце з'явілася шмат онлайн-рэсурсаў (CSS gradient generator), якія значна спрашчаюць працу па выбары патрэбных кветак: angrytools, flatonika, generatecass і інш. З іх дапамогай можна съэкономить час на падбор патрэбных кветак, прадумаць лінію пераходаў і накладанняў.

Дынамічная колеравая схема

Традыцыі, якія ляжаць у аснове стварэння вэб-рэсурсаў, зрабілі непарушным правіла: структура, змест і дыялог сайта з кліентам - кампетэнцыя распрацоўніка, якая рэалізуе волю ўладальніка (заказчыка). Знешні выгляд сайта, яго дызайн таксама традыцыйна ставіцца да таго, што не вызначаецца кліентам.

Між тым, колькасць разнастайных прылад расце, а ў сямействах кожнага віду з'яўляюцца розныя перспектыўныя асобнікі, якія маюць істотныя адрозненні, не столькі ў колераперадачы, колькі ў дазволе і формах бачнай вобласці браўзэра.

Разнастайнасць браўзэраў і выкарыстоўваюцца версій таксама стварае праблемы ў адэкватным адлюстраванні магчымасцяў CSS gradient.

У сукупнасці ацэньваючы гэтыя абставіны і прыклады некаторых перспектыўных работ, можна сцвярджаць, што знешні выгляд сайта толькі ў дефаултном стане - кампетэнцыя распрацоўніка і / або ўладальніка рэсурсу. Толькі калі кліент ўпершыню наведвае рэсурс, ён можа мець магчымасць ацаніць дызайн сайта. Калі кліент палічыў мэтазгодным запомніць сайт і выкарыстоўваць яго ў сваёй паўсядзённым жыцці, то яго жаданне мець інструменты для кіравання знешнім выглядам і функцыяналам цалкам абгрунтаванае.

Такі перанос цэнтра цяжару выгадны распрацоўніку: знікае неабходнасць займацца рэалізацыяй кроссбраузерностью, тэставаць сайт на розных прыладах у розных аперацыйных сістэмах.

Больш за тое, тэндэнцыя дазволіць стварыць агульную базу дадзеных па фактычнай рэалізацыі магчымасцяў CSS правілаў на розных прыладах. Гэта толькі пачатак, але яго патэнцыял мае вялікае значэнне.