Альфа канал в CSS

Альфа канал в CSS

От автора: во всех цветовых системах в CSS есть дополнительный альфа компонент (канал), с помощью которого можно задавать уровень прозрачности. Об этом и поговорим в данной статье.

К примеру, чтобы установить наполовину прозрачный красный фоновый цвет блоку div с id genera, необходимо:

#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 цвета с альфа компонентом, такие цвета называются шестнадцатеричными:

#genera {
    background: #ff000077;
}

В коде выше записан полупрозрачный красный цвет. Если значения повторяются, то их можно урезать:

#genera {
    background: #f007;
}

Альфа канал для шестнадцатеричных цветов – новая функция, и на данный момент работает только в альфа версиях браузеров. По этой причине ее нельзя использовать в работе, если только вы не используете компилятор типа Sass или PostCSS, которые конвертируют запись вида #rrggbbaa в rgba или hsla эквивалент.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree