Основе ЦСС -а: Рад са бојама

Приликом дизајнирања веб странице потребно је узети у обзир много фактора; фонт, УКС ток и још много тога. Један веома важан елемент дизајна је боја. Чак и једноставне одлуке попут боје марке, боје обруба и боје позадине дају дефинитиван и приметан утицај.

У овом чланку ћемо покрити основе ЦСС боја и научити како претворити ХТМЛ локацију у веб локацију беспрекорног изгледа.

Почетак рада са ЦСС бојама

Постоји одређени начин за описивање боја у ЦСС -у који рачунар може разумети. Обично се то ради разбијањем боје на различите компоненте, рачунањем мешаног скупа примарних боја да би се добила жељена боја. Постоји неколико различитих начина за описивање боје у ЦСС -у.

Коришћење назива боја као кључних речи

Постоји приближно 140 назива боја ЦСС -а које већина модерних прегледача подржава. То би могло бити тако једноставно као црвена или цијан за кључну реч у боји. Иако помаже у умереном распону боја, ограничени сте на неколико постављених боја са нултом контролом нијанси и нијанси. Овде ћете морати да скочите на виши опсег опција ЦСС боја.

/*Syntax*/
боја црвена;
боја: гримизна;
боја: слатеблуе;

Коришћење РГБ вредности

Приликом дизајнирања веб локације или апликације, шема боја много је важно - дефинитивно не би требало да буде последње на шта мислите. У ЦСС -у можете користити три методе за представљање РГБ боје. То су хексадецимални запис низа, РГБ функционални запис и ХСЛ функционални запис. Ево детаљнијег прегледа сваког од њих.

Хексадецимални запис низа

Хексадецимални запис низа увек почиње знаком #. Пратећи овај знак, боје одређујете помоћу хексадецималних цифара одређеног кода боје. Низ не разликује велика и мала слова, али је уобичајено користити мала слова. Ево неколико случајева употребе:

#ррггбб

То је најчешћи начин описивања нумеричке боје. То је потпуно непрозирна боја са црвеним, зеленим и плавим компонентама 0крр, 0кгг, и 0кбб редом.

#ррггббаа

Прати горе наведене РГБ критеријуме са алфа каналом који управља чистоћом боје. Што је нижи 0каа вредност је што боја постаје прозирнија.

#ргб

Ако имате боју #556677, можете једноставно написати као #567 будући да представља 0крр, 0кгг, и 0кбб редом. На пример, #000 (или #000000) је црно док #ффф (или #фффффф) је бела.

#ргба

Прати горње критеријуме са алфа каналом који је наведен 0каа за контролу непрозирности.

РГБ Функционална нотација

РГБ функционални запис представља боје које користе црвене, зелене и плаве компоненте. Дефинише се помоћу ргб () функција који прихвата улазне параметре у облику примарних црвених, зелених и плавих компоненти (и опционални алфа канал). Црвене, зелене и плаве вредности морају бити цео број између 0 до 255 (укључујући), или проценат који варира од 0% до 100%. С друге стране, алфа канал прихвата вредности од 0,0 (потпуно провидан) до 1,0 (потпуно непрозиран). Такође прихвата процентуалну вредност од 0% (исто као 0,0) и 100% (исто као 1,0).

/*Syntax*/
боја: ргб (рр, гг, бб);
боја: ргба (рр, гг, бб, а);

Функционална ознака ХСЛ

Функционална ознака ХСЛ -а представља боју помоћу нијансе, засићења и сјаја. Врло је сличан ргб () функцију у смислу употребе. Можете лако пронаћи хексадецималну вредност било које боје на екрану рачунара. У овој методи боје, нијанса дефинише стварну боју према положају на точкићу у боји. Засићеност је проценат сиве боје са највећом могућом нијансом. Сјајност мења боју са свог најтамнијег у најсветлији могући изглед како се повећава.

Вредност нијансе (Х) је наведена подржаном јединицом угла у ЦСС -у. То укључује дег, рад, град, и ред. Засићеност (С) одређује постотак коначне боје која се састоји од нијансе. Компонента осветљености (Л) дефинише ниво сиве боје.

/*Syntax*/
боја: хсл (КСКСдег, КСКС%, КСКС%);
боја: хсл (КСКСтурн, КСКС%, КСКС%);

Примена боја на ХТМЛ елементе

У ЦСС -у, боја проперти дефинише боју предњег плана садржаја и боја позадине дефинише боју позадине садржаја структурираног ХТМЛ -ом. Када се елемент исцрта, можете користити својства боје за његово обликовање.

Својство боје за текстове

Тхе боја својство се користи за цртање текста и када су вам потребне било какве украсе за текст. Можете користити текст-декорација-боја својство за исцртавање, подвлачење или прецртавање линија различитих боја. Можете променити боју позадине текста помоћу боја позадине својство. На текст можете применити ефекат сенке помоћу текст-сенка својство. Можете изабрати текст-нагласак-боја при цртању симбола нагласка у текстуалним пољима.

Својство боје за кутије

Као што знате, све на веб страници следи модел кутије. Дакле, сваки елемент је кутија са неком врстом садржаја и опционалним подлогом, обрубом и маргином. Можете користити боја позадине својство када нема садржаја у првом плану. Када цртате линију да бисте одвојили колоне текста, можете користити колона-правило-боја имовину за то. Постоји један контура-боја својство да обоји контуру. Имајте на уму да се контура разликује од ивице - делује као показатељ фокуса.

Својство боје за ивице

Сваки ХТМЛ елемент може имати обруб. Можете поставити боја ивице имовина као боја на врху обруба, граница-десна-боја, боја ивице-дна, и бордура-лево-боја да бисте поставили боју ивица одговарајућих страница. Коришћење стенографске имовине је ипак добра пракса.

Тхе бордер-инлине-старт-цолор проперти вам омогућава да обојите ивице ивице које су најближе почетку. С друге стране, бордер-инлине-енд-цолор Својство вам омогућава да обојите крај почетка редова текста у оквиру. Иако варира у зависности од вашег начин писања, текстуална оријентација, и правац.

Закључак: Боја и приступачност

Иако је на лепо дизајнирану веб локацију увелико утицала употреба боје, увек се побрините да буде приступачна. Неправилна употреба боја може довести до губитка значајног промета на вашој веб локацији.

Коришћење хексадецималних нотација, назива боја или РГБ вредности потпуно је на вама. Само се уверите да користите боје за јачање постојећег текста и нека следи одређену визуелну хијерархију. Научити више о теорији боја и створити властиту палету изванредна је идеја ако сте почетник у развоју веб страница. До тада, срећно и шарено кодирање!

Како користити теорију боја за подизање ваших креативних пројеката

Коришћењем правих боја на прави начин можете подићи своје креативне пројекте на потпуно нови ниво.

Прочитајте следеће

О аутору