Основи на CSS: Работа с цветове

Има много фактори, които трябва да имате предвид при проектирането на уебсайт; шрифт, UX поток и много други. Един много важен елемент от дизайна е цветът. Дори прости решения като цвят на марката, цвят на рамката и цвят на фона осигуряват определено и забележимо въздействие.

В тази статия ще разгледаме основите на цветовете на CSS и ще научим как да трансформираме HTML сайт в безупречно изглеждащ уебсайт.

Първи стъпки с CSS цветове

Има определен начин за описване на цветовете в CSS, който компютърът може да разбере. Обикновено се прави чрез разделяне на цвета на различни компоненти, изчисляване на смесен набор от първични цветове, за да се образува желаният цвят. Има няколко различни начина за описание на цвят в CSS.

Използване на имена на цветове като ключови думи

Има приблизително 140 имена на цветове на CSS, които повечето съвременни браузъри поддържат. Може да е толкова просто, колкото червен или циан за ключовата дума цвят. Въпреки че помага с умерена гама от цветове, вие сте ограничени до няколко зададени цвята с нулев контрол върху нюансите и нюансите. Тук ще трябва да преминете към по -високия диапазон от опции за цвят на CSS.

/*Syntax*/
цвят: червен;
цвят: пурпурен;
цвят: шиферно синьо;

Използване на RGB стойности

Докато проектирате уебсайт или приложение, цветова схема има голямо значение - определено не трябва да е последното нещо, което обмисляте. В CSS можете да използвате три метода за представяне на RGB цвят. Това са шестнадесетична низова нотация, RGB функционална нотация и HSL функционална нотация. Ето по -подробно разглеждане на всеки от тях.

Шестнадесетична нотация на низ

Шестнадесетичната нотация винаги започва с символа #. Следвайки този знак, вие определяте цветовете, използвайки шестнадесетични цифри на определен цветен код. Низът не е чувствителен към регистър, но е обичайно да се използват малки букви. Ето някои случаи на употреба:

#rrggbb

Това е най -често срещаният начин да се опише цифров цвят. Това е напълно непрозрачен цвят с червени, зелени и сини компоненти като 0xrr, 0xgg, и 0xbb съответно.

#rrggbbaa

Той следва критериите за RGB, описани по -горе, с алфа канал, който се справя с чистотата на цвета. Колкото по -ниска е 0xaa стойността е, колкото по -прозрачен става цветът.

#rgb

Ако имате цвят #556677, можете просто да го напишете като #567 тъй като представлява 0xrr, 0xgg, и 0xbb съответно. Например, #000 (или #000000) е черен докато #Ф ф ф (или #ffffff) е бял.

#rgba

Той следва горните критерии с алфа канал, определен от 0xaa за контрол на непрозрачността.

RGB функционална нотация

Функционалната нотация на RGB представлява цветове, използващи червени, зелени и сини компоненти. Определя се с помощта на rgb () функция който приема входни параметри под формата на първични червени, зелени и сини компоненти (и по избор алфа канал). Червените, зелените и сините стойности трябва да бъдат цяло число между 0 да се 255 (включително) или процент, вариращ от 0% до 100%. От друга страна, алфа каналът приема стойности от 0.0 (напълно прозрачен) до 1.0 (напълно непрозрачен). Той също така приема процентна стойност от 0% (същото като 0,0) и 100% (същото като 1,0).

/*Syntax*/
цвят: rgb (rr, gg, bb);
цвят: rgba (rr, gg, bb, a);

Функционална нотация на HSL

Функционалната нотация на HSL представлява цвят, използващ оттенък, наситеност и яркост. Много е подобен на rgb () функция по отношение на използването. Можете лесно намерете шестнадесетичната стойност на всеки цвят на екрана на компютъра. В този цветен метод нюансът определя действителния цвят според позицията на цветното колело. Наситеността е процентът на сивото с максималния възможен оттенък. Яркостта преминава цвета от най -тъмния до възможно най -яркия вид с увеличаването му.

Стойността на нюанса (H) се определя от поддържаната единица за ъгъл в CSS. Включва градус, рад, град, и завой. Saturation (S) определя процента на крайния цвят, съставен от нюанс. Компонентът за яркост (L) определя нивото на сивото.

/*Syntax*/
цвят: hsl (XXdeg, XX%, XX%);
цвят: hsl (XXturn, XX%, XX%);

Прилагане на цветове към HTML елементи

В CSS, цвят свойство определя цвета на предния план на съдържанието и Цвят на фона определя цвета на фона на съдържанието, структурирано по HTML. Когато даден елемент се изобразява, можете да използвате свойствата на цвета, за да го оформите.

Цветово свойство за текстове

The цвят property се използва при рисуване на текст и когато имате нужда от всякакъв вид текстови декорации. Можете да използвате текст-декорация-цвят свойство за изобразяване на подчертаване, подчертаване или прочертаване на линии с различни цветове. Можете да промените цвета на фона на текста с помощта на Цвят на фона Имот. Можете да приложите ефект на сянка върху текст, като използвате текстова сянка Имот. Можете да изберете текст-акцент-цвят докато рисувате символи за ударение в текстови полета.

Цветово свойство за кутии

Както знаете, всичко на уеб страница следва модела на кутията. По този начин всеки елемент е кутия с някакъв вид съдържание и незадължителна подложка, рамка и поле на поле. Можете да използвате Цвят на фона собственост, когато няма съдържание на преден план. Когато чертаете линия, за да разделите колоните на текст, можете да използвате колона-правило-цвят имот за него. Има един контур-цвят свойство да оцветява контура. Обърнете внимание, че контурът е различен от границата - той действа като индикатор за фокус.

Цветово свойство за граници

Всеки HTML елемент може да има граница. Можете да зададете цвят на границата имот като цвят на границата отгоре, цвят на границата вдясно, цвят на границата отдолу, и цвят на границата вляво за да зададете цвета на границата на съответните страни. Използването на стенографско свойство обаче е добра практика.

The border-inline-start-color property ви позволява да оцветявате ръбовете на границата, които са най -близо до началото. От друга страна, border-inline-end-color свойството ви позволява да оцветявате края на началото на редовете с текст в поле. Въпреки че варира в зависимост от вас режим на писане, текстова ориентация, и посока.

Обобщение: Цвят и достъпност

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

Използването на шестнадесетични нотации, имена на цветове или RGB стойности зависи изцяло от вас. Просто се уверете, че използвате цветове, за да подсилите съществуващия текст, и той да следва определена визуална йерархия. Да научите повече за теорията на цветовете и да създадете своя собствена палитра е изключителна идея, ако сте начинаещ уеб разработчик. Дотогава щастливо и цветно кодиране!

Как да използвате теорията на цветовете за издигане на вашите творчески проекти

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

Прочетете Напред

За автора