Завдання кольору в css3.

В CSS було три основних способи завдання кольору, але в CSS3 з`явилося ще два. Ось про те, як можна задавати кольори в CSS3, ми і поговоримо в цій статті.

Перший спосіб: за назвою

Щоб задати колір, ми можемо просто написати його назву англійською мовою. наприклад:

body { 
 color: blue-// синій колір 
 color: green-// зелений колір 
}

Другий спосіб: hex

Щоб задати колір в даному форматі, нам потрібно на початку поставити #, а потім написати 6 знаків, значення яких може бути від 0 до F.
Перші два знаки означають червоний колір, наступні два - зелений, інші два - синій.

Відео: Уроки по CSS / CSS3. Частина 6. Колір

body { 
 color:# 0000FF- // синій 
 color:# 00FF00- // зелений 
 color:# FF0000- // червоний 
 color:# 000000- // чорний 
 color:# FFFFFF- // білий 
}

Третій спосіб: RGB

RGB (Red Green Blue) - це спосіб, де ми задаємо три кольори - червоний, зелений і синій, змішуючи які можна отримати різні поєднання кольорів. Тобто це майже те ж, що і hex, тільки формат іншої. Значення тут задаються від 0 до 255

Відео: Можливості CSS3. Кольорові значення і їх запис в CSS: як змінити колір

body { 
 color: rgb(0,0,255) -// синій 
 color: rgb(0,255,0) -// зелений 
 color: rgb(255,0,0) -// червоний 
 color: rgb(0,0,0) -// чорний 
 color: rgb(255,255,255) -// білий 
}

Четвертий спосіб: RGBA

RGBA (Red Green Blue Alpha) - це спосіб, який з`явився в CSS3. Він абсолютно ідентичний RGB за винятком тільки того, що в останньому параметрі ми можемо вказати прозорість. Прозорість може приймати значення від 0 (повністю прозорий) до 1 (повністю непрозорий)

body { 
 color: rgba(210,255,0,.5) -// напівпрозорий жовтий 
}

Як бачите, ми можемо пропускати провідний 0 в прозорості.

П`ятий спосіб: HSL

HSL (Hue Saturation Lightness) - це спосіб, в якому колір визначається 3 параметрами: відтінком, насиченістю і яскравістю.

Відтінок кольору вказується в градусах повороту колірного кола (0 градусів - червоний, 120 - зелений, 240 - блакитний і т.д.)

насиченість вказується в процентах. У міру зниження відсотків колір буде бліднути
яскравість кольору також вказується у відсотках (0% - темний, 100% - світлий)

body { 
 color: hsl(0,30%,50%) - 
 color: hsl(120,100%,80%) - 
 color: hsl(240,100%,50%) - 
}

HSLA відрізняється від HSL точно тим же, чим відрізняється RGB від RGBA, так що розглядати його докладно я не буду, а просто наведу приклад

body { color: hsla(120,100%,50%,0.3) -}

Поради:

Вважається, що перевагою схеми hsl перед rgb є більш природні природні кольори, так що раджу використовувати саме цей формат.
hsl інтуїтивно зрозумілий. Тобто, поглянувши на цифри, можна відразу уявити, яким буде колір.
hsl, hsla і rgba підтримують браузери IE 9.0+, Opera 10.0+, Firefox 3.0 +. Якщо ви хочете мати підтримку в старіших браузерах, то використовуйте старі формати завдання кольору.

Поділися в соціальних мережах:

Схожі