Цвет того или иного элемента сайта может быть определён следующими способами:
- Именным значением, например: red - красный.
- Значением цвета RGB, например: RGB(255,0,0) - красный.
- Шестнадцатеричным значением цвета RGB, например: #ff0000 - красный.
HSL
В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). - это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:
Оттенок.
Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°). Радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам и 360° тоже, 120 градусов это зелёный, 240° синий - это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.
Насыщенность.
Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет становится серым.
Светлота.
Светлота или яркость (Lightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах, чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.
Пример CSS3 кода:
body{background-color:hsl(120,10%,50%);color:hsl(60,100%,50%)}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.blok3 {background-color:hsl(187,61%,54%)}
.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
<div class="blok4">Блок 4</div>
<div class="blok5">Блок 5</div>
<div class="blok6">Блок 6</div>
</body>
</html>
Альфа каналы.
RGBA
На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.
Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.
Пример CSS3 кода:
body{background-image: url(../bg.gif)}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:rgba(255,0,0,1)}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA.
Пример CSS3 кода:
body{background-image: url(../bg.gif)}
.blok1{background-color:hsla(60,100%,50%,0.1)}
.blok2{background-color:hsla(60,100%,50%,0.5)}
.blok3{background-color:hsla(60,100%,50%,1)}
Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
Задание:
Создайте собственные примеры страницы, где будут использоваться различные варианты цветовой модели.
В предыдущем уроке мы рассматривали прозрачность в CSS 3
В следующем уроке рассмотрим возможности работы с фоном в CSS 3