AtoZ CSS Screencast: CSS Синтаксис Цвета

RGB

В CSS цвета определяются в стандартном цветовом пространстве Red Green Blue или sRGB, где цвета определяются через 3 канала: Red, Green и Blue.

Одним из способов определения цвета в CSS является использование синтаксиса RGB. Здесь значения варьируются от 0 до 255 для каждого из трех компонентов. В этом случае указание 255 для каждого из компонентов дает нам белый цвет.

 .box {
  color: rgb(255, 255, 255); /* white */
  color: rgba(255, 255, 255, 0.5); /* semi-transparent white */
}

Мы также можем сделать полупрозрачные цвета с RGBA. Здесь четвертое значение, известное как Альфа, определяет непрозрачность цвета. Это значение является десятичным в диапазоне от 0 до 1, где 0 является полностью прозрачным, а 1 — полностью непрозрачным.

transparentrgba(0,0,0,0)

 .box {
  color: transparent;
  color: rgba(0, 0, 0, 0); /* transparent */
}

наговор

Вероятно, цветовой формат, который я использую чаще всего, является шестнадцатеричным. Шестнадцатеричное — это сокращение от шестнадцатеричной системы счисления. Большинство людей более знакомы с десятичной — или основанием 10 — как метрическая система.

Шестнадцатеричный цвет разбит на три куплета, которые определяют красный, зеленый и синий компоненты цвета. Значения куплетов находятся в базе 16 и находятся в диапазоне от 00 до FF. Вы можете думать о 00 как об отсутствии цвета и FF как о полном цвете. FF на самом деле является десятичным числом 255 в базе 16.

В этом случае мы имеем полный красный, зеленый и синий, которые объединяются в белый.

Во втором примере у нас нет красного, зеленого и синего, что дает нам зеленый.

Когда оба значения в каждом из трех куплетов одинаковы, шестнадцатеричное значение может быть сокращено до сокращенного трехзначного формата.

 .box {
  color: #00ff00; /* green */
  color: #0f0; /* green in shorthand */
}

HSL

HSL означает оттенок, насыщенность и легкость.

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

Насыщенность определяет яркость цвета от 0% — монохромный — до 100% — яркий.

Освещенность также устанавливается в процентах и ​​определяет общее количество яркости.

HSL имеет соответствующую версию HSLA, которая обеспечивает альфа-прозрачность.

 .box {
  color: hsl(0, 0%, 100%); /* white */
  color: hsla(0, 0%, 100%, 0.5); /* semi-transparent white */
}

использование

Итак, как мы используем эти цвета?

Свойство color влияет только на текст, поэтому оно позволяет нам установить цвет текста элемента.

Но есть много других свойств, которые принимают цвет. background-color Мы также можем установить border-colorbox-shadowtext-shadow Мы даже можем изменить цвет fill

 .box {
  background-color: #000;
  background-image:linear-gradient(to right, #000, #fff);
  border-color: #000;
  box-shadow: 0 0 10px #000;
}
.text {
  text-shadow: 0 0 10px #000;
}
.svg path {
  fill: #000;
}

CurrentColor

Есть одно последнее ключевое слово цвета, которое имеет уникальную, если не совсем полезную цель. currentColorborder-colorbox-shadowtext-shadow Давайте посмотрим на быстрое демо.

Мы можем создать поле с рамкой и тенью, как показано ниже, и передать значения цвета в виде ключевого слова, hex, rgb или hsl. Если вместо значения цвета мы используем currentColorcolor

Если мы теперь установим цвет на hotpink, он будет использоваться вместо currentColor. Это позволяет нам удалить значение цвета из свойств border и box-shadow. Что, возможно, спасет вас от нескольких нажатий клавиш.

 .box {
  color: hotpink;
  padding: 50px;
  border: 10px solid; /* border-color is hotpink */
  box-shadow: 0 0 100px; /* shadow color is hotpink */
}

Следите за нашей статьей Quick Tip в ближайшее время!