Способ задания цвета

0 / 5

Автор: Администратор

09.05.2015

Теги: css, css3, rgba, color

В CSS кодах цвет(color) можно задавать разными способами, самый удобный, по моему мнению, способ задания через rgba.

Цвет может задавать цвет текста, цвет фона блоков, цвет границ(обводки) и так далее. Более подробно о других способоах задания цветов можете почитать в нашем курсе по CSS.

rgba - позволяет задавать цвет используя 3 числа, три составляющих red, green, blue. Каждая из составляющих задается при помощи целого числа от 0 до 255, 0 означает полное отсутствие составляющей, а 255 наоборот.

По мимо трех составляющих цвета, так же можно задавать, так называемую alpha-составляющую. На деле она отвечает за прозрачность цвета. Стоит понимать что задается прозрачность цвета а не всего блока (Если вы хотите побольше узнать о способах прозрачности, прочитайте нашу статью - Как скрыть элементы со страницы, при помощи CSS). Альфа-составляющая задается числом с плавающей точкой, от 0 до 1.

Шаблон, цвета на примере цвета блока:

background: rgba ( *составляющая красного*, *составляющая зеленого*, *составляющая синего*, *составляющая alpha*);

Вот несколько примеров:

div {
	background: rgba(255,0,0,0.4);
	width:200px; 
	height:100px;
}

<div>Блок с фоном наполовину прозрачного цвета</div>

Блок с фоном наполовину прозрачного цвета

div {
	background: rgba(0,255,0,0.1);
	width:200px; 
	height:100px;
}

<div>Блок с фоном почти бесцветным</div>

Блок с фоном почти бесцветным

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
26.80
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15193

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10132

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3581

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 5792