Второе значение (S aturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет "линяет" и становится серым.
Светлота.
Светлота или яркость (L ightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.
Такая вот теория.. теперь к практике..
Как обычно покажу на примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет HSL</title>
<style type="text/css">
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%) }
</style>
</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 непрозрачный вовсе.
Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет RGBA</title>
<style type="text/css">
body{
background-image: url(graphics/fon.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) }
</style>
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
Смотреть пример
HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA, поэтому повторятся, не буду просто покажу пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет HSLA</title>
<style type="text/css">
body{
background-image: url(graphics/fon.gif)
}
.blok1{background-color: hsla(120,100%,50%,0.1) }
.blok2{background-color: hsla(120,100%,50%,0.5) }
.blok3{background-color: hsla(120,100%,50%,1) }
</style>
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>
Дата добавления: 2015-11-30; просмотров: 57 | Нарушение авторских прав