Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

През изминалите няколко дни имах възможност да изпробвам едно ново CSS 3 свойство, а именно RGBa цветове. Различното при тях е, че освен цвета имаш възможност да промениш и неговата прозрачност. Останах с доста положителни впечатления. Удивително е колко бързо може да се постигне наистина добър ефект чрез експериментиране с няколко различни стойности.

В днешния урок ще научиш най-важното за RGBa цветовете. Смело мога да кажа, че работата с това свойство е елементарна, но пък резултата - мигновен. Особено, ако искаш да използваш слоеве и прозрачност в своя дизайн. Да започваме!

Съдържание

• Какво представляват RGB цветовете?
• Какво представлява RGBa?
  • Синтаксис
  • Настояща браузърна поддръжка
  • Поддръжка на стари браузъри (основно IE < 9)
• Упражнение
• Заключение

Какво представляват RGB цветовете?

Преди да се впусна в обяснения относно RGBa, може би е добра идея да направя кратко представяне на RGB цветовете. Най-вече, защото, с минимална разлика, работата и на двете свойства е еднаква.

За да използваш определен цвят в своята страница, имаш няколко възможности:

• RGB комбинация (напр. color: rgb(33, 33, 33);)
• Hex комбинация (напр. color: #212121;)
• HSL комбинация (напр. color: hsl(0, 0%, 13%);)

В Photoshop можеш да видиш RGB и Hex комбинациите на всеки избран цвят.

Абревиатурата RGB идва от Red (червен), Green (зелен), Blue (син). Това са трите основни цвята. Всички останали се получат чрез комбинация от тях.

Характерното на RGB е, че всеки цвят се представя като цифрова стойност варираща от 0 до 255. Например:

• rgb(0 0 0); е черно
• rgb(255 255 255); е бяло
• rgb(255 0 0); е червено
• rgb(0 255 0); е зелено
• rgb(0 0 255); е синьо и т.н.

Какво представлява RGBa?

В CSS 3 имаш на разположение ново свойство наречено rgba(). При него, освен основните три цвята е добавена и четвърта стойност, която е отговорна за прозрачността на цвета. Вече не е нужно да използваш png изображения, за да добавиш прозрачност. Всичко, от което се нуждаеш е rgba() свойството.

Синтаксис

Ок, идва най-приятната част и това е да научиш как работи rgba(). Разгледай следващото изображение:

rgba() свойството приема 4 стойности:

• red - Тук определяш червения цвят. Стойността може да варира от 0 до 255. Разрешено е използването и на процентни стойности - от 0% до 100%.
• green - Тук определяш зеления цвят. Стойността може да варира от 0 до 255. Разрешено е използването и на процентни стойности - от 0% до 100%.
• blue - Тук определяш синия цвят. Стойността може да варира от 0 до 255. Разрешено е използването и на процентни стойности - от 0% до 100%.
• transparency – Тук определяш нивото на прозрачност на получения цвят. Стойността може да варира от 0 до 1. 0 прави цвета напълно прозрачен, а 1 - солиден. Стойностите между 0 и 1 се определят със знака точка преди желаната стойност т.е. 0.5 ще направи цвета полупрозрачен. За улеснение можеш да пропуснеш нулата отпред - .5, което значи абсолютно същото.

Настояща браузърна поддръжка

Както можеш да видиш от следващото изображение, браузърната поддръжка на това CSS 3 свойство е доста широка. Просто няма причина да го игнорираш.

Информацията е взета от CanIUse.

Поддръжка на стари браузъри (основно IE < 9)

Разбира се, проблема с Internet Explorer версии 8 и по-ранни отново е налице. Преди напълно да се откажеш от използването на това свойство, помисли върху следното:

През последните няколко години уеб като цяло стигна доста далеч. Всички браузъри вече се обновяват автоматично и това до голяма степен умаломажава значението на настоящата им версия. Още повече, потребителите на стари браузъри ежедневно преминават към по-нови. Глобално погледнато, IE 6 вече почти не се използва. Съдбата на IE 7 е подобна. Дори ако разгледаш статистиката на сайта си, със сигурност ще забележиш, че с всеки изминал месец посетителите използващи стари версии IE намаляват. Бъдещето пред теб е наистина светло!

Все пак, докато IE 6 и 7 са на изчезване, IE 8 е все още доста популярен. Преди няколко дни споделих във Facebook статистиката на този сайт за първите 3 месеца на 2013. В нея ясно се вижда, че от 396 посещения направени през IE, в 180 от тях е използван IE 8. Това не е никак малко. За съжаление, тези посетители няма да се насладят на прозрачните качества на сайта, но това няма направи престоя им по-лош. Твоя е отговорността да направиш сайта си достъпен с или без прозрачност. Най-важното нещо е съдържанието на сайта. Докато то е там и е лесно достъпно, всичко останало трябва да се третира като подобрение.

Точно затова моя съвет е да не се вманиячаваш толкова върху идеята, че дадено свойство трябва да бъде поддръжано на 100% от всички браузъри преди да започнеш да го използваш.

Все пак, добрата новина е че има много лесен начин да предложиш алтернатива за браузърите, които не поддръжат rgba(). Това е да използваш “обикновеното” rgb() свойство като fallback. Подредбата им трябва да бъде в този ред:

h2 {
	background-color: rgb(32, 32 ,32); /* fallback за стари браузъри */
	background-color: rgba(0, 0, 0, .6);
}

Начина на работа тук е много прост: ако браузъра не поддържа новото rgba() свойство, то той ще игнорира тази декларация. В този случай ще влезе в сила цвета създаден чрез rgb().

Упражнение

Време е да приложиш наученото до сега.

В следващото упражнение ще ти покажа един лесен начин за поставяне на заглавие върху изображение. Различното тук ще бъде фона на текта. Неговият цвят ще бъде черен, но със слаба прозрачност. Това ще направи изображението да се вижда съвсем леко. Ето как ще изглежда крайният резултат (Демо).

Да започваме!

Стъпка 1

Най-напред ще създам нова html страницата. За целта ще използвам следния код:

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>RGBa цветове</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="headline">
			<h2>Футболна топка</h2>
			<img src="football-ball.jpg" alt="Футболна топка" />
		</div>
		<p>Lorem ... omnis id.</p>
		<p>Lorem ... omnis id.</p>
	</body>
</html>

В кода няма нищо сложно. Просто един div с class="headline", в който има поместени едно h2 заглавие и едно изображение.

Резултат:

Стъпка 2

Страницата в момента изглежда доста обикновено. Следващия CSS код ще добави малко стил.

Във външния CSS файл добавям следното:

body {
	font: 14px/21px Verdana, Arial, sans-serif;
	width: 640px;
	margin: 0 auto;
}

Този код ще ограничи ширина на съдържанието до 640px и ще го центрира. Освен това, чрез съкратеното свойство font задавам размер на шрифта, височина на реда и типа шрифт, който искам да бъде използван.

Резултат:

Стъпка 3

В тази стъпка ще променя разположението на h2. Целта ми е да го позиционирам в долния край на изображението.

Следния CSS ще свърши нужната работа:

.headline {
	position: relative;
}
.headline h2 {
	bottom: 0;
	left: 0;
	margin: 0;
	position: absolute;
}

Кратко обяснение:

• .headline – Кода тук променя типа позиция на div-а. По подразбиране всеки елемент е с position: static;. Чрез задаване на position: relative; съм сигурен, че всеки вътрешен и абсолютно позициониран елемент ще остане в рамките на родителския елемент.

  Ако забравя или пропусна да променя position, тогава всеки вътрешен и абсолютно позициониран елемент ще се позиционира спрямо прозореца на браузъра. Със сигурност не искам това да се случва.

• .headline h2 – Кода тук променя позицията на h2 на absolute. Чрез left: 0; и bottom: 0; заглавието ще застане в долния ляв ъгъл на родителския елемент. Отново, тъй като родителския елемент е с position: relative;, h2 заглавието ще отиде в долния ляв ъгъл на .headline, а не на страницата. margin: 0; занулява разстоянието отгоре и отдолу, което браузъра поставя по подразбиране.

Резултат:

Стъпка 4

Време е да добавя малко стил на заглавието и изображението. За тази цел ще използвам следния CSS:

.headline h2 {
	background-color: rgb(33, 33, 33);
	background-color: rgba(0, 0, 0, .6);
	bottom: 0;
	color: #fff;
	font-size: 28px;
	line-height: 42px;
	left: 0;
	margin: 0;
	padding: 20px 19px 20px 20px;
	position: absolute;
	width: 94%;
	border-radius: 0 0 25px 25px;
}
.headline img {
	vertical-align: bottom;
	border-radius: 25px;
}

Част от кода тук вече ти е познат от Стъпка 3. Ето кратко обяснение на останалата част:

Селектор .headline h2:

• background-color: rgb(33, 33, 33); - традиционния начин на задаване на RGB цвят. Този цвят ще бъде използван единствено, ако браузъра не поддръжа свойството RGBa. Това е т.нар. fallback.
• background-color: rgba(0, 0, 0, .6); - новото RGBa свойство, което представих в този урок. В случая използвам черен цвят с .6 прозрачност.
• bottom: 0; - разгледано в Стъпка 3
• color: #fff; - нищо сложно. Тази декларация променя цвета на текста.
• font-size: 28px; - тази декларация променя размера на текста.
• line-height: 42px; - височина на реда. Тъй като тази стойност е 1,5 пъти по-голяма от размера на текста, това ще добави доста приятно разстояние отгоре и отдолу, което ще позволи на заглавието да “диша”.
• left: 0; и margin: 0; са разгледани в Стъпка 3
• padding: 20px 19px 20px 20px; - чрез padding добавям разстояние между съдържанието и стените (рамката) на елемента.
• position: absolute; е разгледан в Стъпка 3
• width: 94%; - тъй като зададох position: absolute;, заглавието загуби блоковите си свойства и ширината му автоматично стана равна на ширината на съдържанието. Ако искам да я променя, трябва да използвам свойството width. В случая задавам 94%, защото преди това добавих padding, който също трябва да се вземе в предвид.
• border-radius: 0 0 25px 25px; - и съвсем накрая използвам border-radius, за да заобля долния ляв и десен ъгъл. Това ще придаде по-интересен вид на заглавието.

Селектор .headline img:

• vertical-align: bottom; - стойността тук променя вертикалното подравняваме на изображението. При тестовете на демото забелязах, че под изображението остава съвсем малко нежелано разстояние. То трябваше да бъде премахнато, за да пасне заглавието и неговия стил идеално върху долната част на изображението. Тази декларация свърши желаната работа.
• border-radius: 25px; тук, както и по-горе, използвам свойството border-radius за заобляне на ъглите и подобряване на стила.

Резултат:

Резултат в браузърите, които не поддържат RGBa и заоблени ъгли:

Заключение

В този урок разгледа едно ново и доста практично CSS 3 свойство. Всяка уеб страница има нужда от цвят. Всяка уеб страница също така има нужда и от стил. rgba() ще ти помогне да го подобриш. Със сигурност няма да е единстеното нещо, което ще използваш, но вече имаш достатъчно знание, за да го направиш по правилен начин.

Какво е мнението ти за това свойство? Имаш ли вече идея как можеш да го използваш в своя сайт? Ще се радвам да споделиш коментара си.

Използвано изображение

Find the space