Как добавить картинке фильтры. CSS-свойство filter
- 7 мая 2023
CSS-свойство filter
добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.
Всего фильтров девять, и вот как они работают:

К каким элементам применять свойство filter
Свойство filter
можно применить к любому элементу с графическим содержимым, например, изображению, видео, тексту или форме. Однако с формами, заголовками и абзацами свойство следует использовать осторожно, оно влияет на внешний вид и читаемость текста. Например, так делать не нужно:

Значения CSS-свойства filter
Значение свойства по умолчанию — none
, то есть фильтр не выбран. Чтобы добавить эффект, нужно заменить none
на любое из следующих значений.
blur
— размытие элемента. Указывается в пикселях: filter: blur(5px)
.

brightness
— яркость элемента. Принимает значение от 0
до 100%
. Например, filter: brightness(50%)
уменьшит яркость элемента на 50%.

contrast
— контрастность элемента, указывается в процентах. Например, filter: contrast(200%)
увеличит контрастность элемента в два раза.

grayscale
— оттенки серого. Принимает значение от 0
до 100%
. Например, filter: grayscale(100%)
сделает фото чёрно-белым.

hue-rotate
— меняет оттенок элемента. Принимает значение в градусах. Например, filter: hue-rotate(90deg)
повернёт оттенок элемента на цветовом круге на 90 градусов.

invert
— инвертирует цвета элемента. Принимает значение от 0
до 100%
. Например, filter: invert(90%)
инвертирует цвета элемента на 90%.

opacity
— прозрачность элемента. Принимает значение от 0
до 100%
. Например, filter: opacity(50%)
сделает элемент полупрозрачным.

saturate
— насыщенность элемента. Принимает значение в процентах. Например, filter: saturate(200%)
сделает цвета насыщеннее в два раза.

sepia
— создаёт эффект старой фотографии. Принимает значение в процентах, например, filter: sepia(50%)
.

Стоит учитывать, что браузеры по-разному поддерживают фильтры, поэтому вёрстка может отличаться на разных браузерах и устройствах. Проверяйте её, тем более, это не очень сложно.
👉 Тем не менее, все браузеры поддерживают свойство filter
, так что смело пользуйтесь им, но знайте меру.
Наследуется ли свойство filter
Свойство filter
не наследуется от родительских элементов. Нужно явно указывать, к каким элементам на странице применить эффекты. Но если вы добавите filter
форме, её поля и подписи к ним станут отображаться с добавленным эффектом.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше

Всё самое важное о псевдоклассе :default
Псевдокласс :default
— это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025

Как работает единица измерения em в CSS
Единица em
используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025

Как найти пустые элементы в CSS
Псевдокласс :empty
помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 29 июля 2025

Как работает ::first-line — оформление первой строки текста в CSS
Псевдоэлемент ::first-line
позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.
Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29
Как использовать: first-line
🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Псевдоэлемент добавляется к селектору через ::
, и внутри блока задаются стили, которые применятся только к первой строке, как она отображается в браузере:
p::first-line {
font-weight: bold;
color: red;
}
Этот стиль сделает только первую строку текста в каждом абзаце <p>
красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.
Какие свойства работают
Псевдоэлемент ::first-line
не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:
Поддерживаются:
color
font
и его производные (font-size
,font-weight
,font-style
,font-variant
)letter-spacing
,word-spacing
line-height
text-decoration
text-transform
vertical-align
background
margin-left
иmargin-right
padding-left
иpadding-right
border-left
иborder-right
Не поддерживаются:
display
,position
,transform
,width
,height
и другие «структурные» свойства.
Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.
Пример с цитатой
<blockquote>
Когда вы начнёте, главное — не останавливаться.
</blockquote>
blockquote::first-line {
text-transform: uppercase;
letter-spacing: 2px;
}
Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.
Советы по использованию
- Используйте
::first-line
для декоративных акцентов: начало статьи, цитаты, описание карточки. - Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
- Не используйте псевдоэлемент для логических операций — он только визуальный.
- Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.
Поддержка
Псевдоэлемент ::first-line
поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block
, inline-block
, inline
).
Заключение
::first-line
— это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.
Больше обзоров веб-функций — в телеграм-канале HTML Academy.
Нашли ошибку или опечатку? Напишите нам.
- 27 июля 2025

CSS-счётчики: как работает свойство counter-set
counter-set
— это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент. Оно похоже на counter-reset
, но отличается тем, что не сбрасывает счётчик, а просто присваивает ему конкретное значение. Это даёт больше контроля над нумерацией, особенно когда нужно продолжить счёт или задать его вручную в разных частях документа.
CSS-счётчики — это способ автоматически нумеровать элементы, например заголовки, пункты списка, шаги в инструкции. Их можно комбинировать с псевдоэлементами и свойством content
, чтобы вставлять числа прямо в текст.
- 25 июля 2025

Как работает :not() в CSS — исключаем элементы из стилей правильно
Доступно в Baseline в статусе «Widely Available» с 2023-07-21
Псевдокласс :not()
позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.
- 20 июля 2025

Выбор цветов в CSS через hsl() и hsla()
CSS-функции hsl()
и hsla()
позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.
- 18 июля 2025

Как перекрыть один элемент другим. CSS-свойство z-index
Свойство z-index
в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index
, тем ближе к пользователю расположен элемент.
- 16 июля 2025

Единица измерения cap в CSS
С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap
. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em
или rem
, но и относительно визуальной высоты заглавных букв.
Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.
- 8 июля 2025

10 свойств в CSS о которых вы, вероятно, не знали
Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>
, <color>
, <font-size>
и может быть, <flex>
. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.
- 22 июня 2025