От автора: во всех цветовых системах в CSS есть дополнительный альфа компонент (канал), с помощью которого можно задавать уровень прозрачности. Об этом и поговорим в данной статье.
К примеру, чтобы установить наполовину прозрачный красный фоновый цвет блоку div с id genera, необходимо:
|
1 2 3 |
#genera { background: rgba(255, 0, 0, 0.5); } |
Цвета с альфа компонентом особенно полезны для создания теней и градиентов, но их можно применять на совершенно любых элементах, как и обычные цвета, в том числе и на рамках и тексте.
При добавлении альфа уровня используются цветовые схемы rgba и hsla. Это не новые системы, а всего лишь вариации rgb и hsl.
В системах rgba и hsla альфа уровень измеряется от 0 до 1, где 0 это «полная прозрачность», а 1 – полная непрозрачность. Прозрачный цвет создается при помощи значений с плавающей точкой; Цвет со значением альфа, равным 1 не отличается от цвета без альфа компонента.
Частично прозрачный элемент будет отображаться с учетом цвета элементов под ним: по большей части это элемент body.
Как значение с плавающей точкой, альфа канал можно записывать как с нулем, так и без него. Но стандартная запись «0.3» более читаема. Обратите внимание, что запись цвета в формате rgb (а не rgba), но с альфа компонентом приведет к тому, что код не будет работать. То же самое будет, если записать цвет в формате rgba, но забыть указать значение альфа канала.
Все современные браузеры поддерживают альфа канал, даже IE9+. Начинающие разработчики часто путаются между свойством opacity и альфа прозрачностью, по этому поводу я написал небольшую статью, в которой объясняю разницу между ними.
Цвет hex с альфа каналом?
Можно создавать hex цвета с альфа компонентом, такие цвета называются шестнадцатеричными:
|
1 2 3 |
#genera { background: #ff000077; } |
В коде выше записан полупрозрачный красный цвет. Если значения повторяются, то их можно урезать:
|
1 2 3 |
#genera { background: #f007; } |
Альфа канал для шестнадцатеричных цветов – новая функция, и на данный момент работает только в альфа версиях браузеров. По этой причине ее нельзя использовать в работе, если только вы не используете компилятор типа Sass или PostCSS, которые конвертируют запись вида #rrggbbaa в rgba или hsla эквивалент.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
