Прозрачность элементов CSS

В CSS есть три способа изменить прозрачность элемента:
с помощью свойства opacity,
с помощью функции rgba(),
с помощью функции hsla().

1. Свойство opacity

Свойство opacity позволяет сделать любой элемент веб-страницы частично или полностью прозрачным. Данное свойство изменяет прозрачность элементов, для которых установлено фоновое изображение (картинка) или задан фон с помощью цвета или градиента. Если элемент, для которого применено свойство opacity, содержит внутри себя другие элементы, то они также изменят свою прозрачность.
Свойство opacity принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный), например:

h1 {color: #CD6829;}
div {
background: #CDD6DB;
opacity: .3;
}
opacity
Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red), зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity, для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

R4mXe
Рис. 2. Цветовая модель RGB
h1 {color: #CD6829;}
div {background: rgba(205, 214, 219, 0.3);}
rgba
Рис. 3. Прозрачность элементов с помощью функции rgba()

3. Функция hsla()

Функция hsla(), параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет.

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

0/360° — красный цвет
60° — желтый цвет
120° — зеленый цвет
180° — голубой цвет
240° — синий цвет
270° — фиолетовый цвет
300° — пурпурный цвет.

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1). Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1), а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1).

color-circle
Рис. 4. Цветовая модель HSL

Удобный конвертер цветов вы найдете здесь.

Поделиться:

Псевдо-класс :target

Псевдо-класс :target позволяет связать гиперссылку <a> с любым элементом на странице, при этом значение атрибута href ссылки должно начинаться с символа # и содержать идентификатор id выбранного элемента (якорь). При нажатии на ссылку с идентификатором якоря, псевдо-класс :target применяет заданный стиль к элементу с якорем. То есть, когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора элемента, этот элемент становится целью (отсюда и :target).

Данный прием можно использовать для создания быстрой навигации по странице с выделением текущего раздела. Чтобы просмотреть данный пример на странице, нажмите на надпись Edit on CODEPEN встроенного редактора, расположенного ниже.

See the Pen mAZwBq by Elena (@html5book) on CodePen.

Или же для создания слайдера:

See the Pen jrbwLd by Elena (@html5book) on CodePen.

Поделиться: