Цвет в CSS

Оцените материал
(1 Голосовать)

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.

Например, определим красный цвет для фона элемента div:

{
    background-color: red;
}

 В CSS есть несколько различных свойств, которые качестве значения требует определенный цвет. Например, за установку цвета текста отвечает свойство color, за установку фона элемента - свойство background-color, а за установку цвета границы - border-color.

Существует несколько различных способов определения цвета текста.

  • Шестнадцатеричного значение. Оно состоит из отдельных частей, которые кодируют в шестнадцатеричной системе значения для красного, зеленого и синего цветов.

    Например, #1C4463. Здесь первые два символа 1C представляю значение красной компоненты цвета, далее 44 - значение зеленой компоненты цвета и 63 - значение уровня синего цвета. Финальный цвет, который мы видим на веб-странице, образуется с помощью смешивания этих значений.

    Если каждое из трех двухзначных чисел содержит по два одинаковых символа, то их можно сократить до одного. Например, #5522AA можно сократить до #52A, или, к примеру, #eeeeee можно сократить до #eee. При этом не столь важно, в каком регистре будут символы.

  • Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов (Red — красный, Green — зеленый, Blue — синий). Значение каждого цвета кодируется тремя числами, которые могут представлять либо процентные соотношения (0–100%), либо число от 0 до 255. Подробнее о модели RGB можно почитать здесь.

    Например:

    background-color: rgb(100%,100%,100%);
    

    Здесь каждый цвет имеет значение 100%. И в итоге при смешивании этих значений будет создаваться белый цвет. А при значениях в 0% будет генерироваться черный цвет:

    background-color: rgb(0%, 0%, 0%);
    

    Между 0 и 100% будут находиться все остальные оттенки.

    Но, как правило, чаще применяются значения из диапазона от 0 до 126. Например,

    background-color: rgb(28, 68, 99);
    
  • Значение RGBA. Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например:

    background-color: rgba(28, 68, 99, .6);
    
  • Значение HSL. HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность. HSL задает три значения. Первое значение Hue угол в круге оттенков - значение в градусах от 0 до 360. Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°.

    Второе значение - Saturation - представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет).

    Третье значение - Lightness - определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый). Для получения чистого цвет применяется значение 50 %.

    Например:

    background-color: hsl(206, 56%, 25%);
    

    Данный цвет является эквивалентом значений #1C4463 и rgb(28, 68, 99)

  • Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например:

    background-color: hsl(206, 56%, 25%, .6);
    
  • Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green (для зеленого цвета). К примеру,

    color: red;
    

    является эквивалентом

    color: #ff0000;
    

    Полный перечень цветов можно найти на странице https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

В заключение следует отметить, что существует множество бесплатных онлайн-генераторов цвета, где можно настроить и посмотреть цвет в нужном формате. Например, генератор цвета на mdn.

Прозрачность

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство, которое позволяет установить прозрачность элементов - свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):

div{
    width: 100px;
    height: 100px;
     
    background-color: red;
    opacity: 0.4;
}

 

Прочитано 1020 раз Последнее изменение Пятница, 26 августа 2016 18:24
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

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

Google+