filter: blur, brightness, contrast, grayscale
Применяйте к элементам фотографические эффекты фильтра с помощью функций свойства filter в CSS.
«filter: blur, brightness, contrast, grayscale» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Свойство CSS filter
Свойство filter применяет к элементам графические эффекты — подобно корректирующим слоям Photoshop — без изменения самого изображения.
filter: blur()
Применяет гауссово размытие. Аргумент задаёт радиус размытия.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Настраивает яркость. 1 = исходное значение, 0 = чёрный цвет, 2 = яркость в два раза выше.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Настраивает контрастность. 1 = исходное значение, 0 = ровный серый цвет, значения выше 1 увеличивают контрастность.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Преобразует изображение в оттенки серого. 0 = исходные цвета, 1 (или 100%) = полностью серое изображение.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Настраивает насыщенность цветов. 0 = серый цвет, 1 = исходное значение, значение выше 1 = яркие цвета.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Поворачивает цветовой тон на заданный угол — смещает все цвета по цветовому кругу.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Применяет тёплый винтажный оттенок сепии. 0 = исходное изображение, 1 = полностью сепия.
<div class="vintage"></div>
filter: drop-shadow()
Подобно box-shadow, но учитывает фактическую отображаемую форму элемента, включая прозрачные области. Идеально подходит для изображений PNG неправильной формы.
<div class="icon">★</div>
Объединение нескольких фильтров
Объединяйте несколько функций filter, разделяя их пробелами. Они применяются слева направо:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
filter создаёт контекст наложения
Применение filter к элементу создаёт новый контекст наложения. Из-за этого дочерние элементы с position: fixed могут вести себя как элементы с position: absolute — это распространённая ошибка.
Быстрая проверка
Какая функция фильтра CSS применяет к элементу гауссово размытие?
Итоги
Свойство filter применяет фотографические корректировки: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() и drop-shadow(). Объединяйте несколько функций пробелами. Помните, что filter создаёт контекст наложения, который может влиять на дочерние элементы с фиксированным позиционированием.
Часто задаваемые вопросы
Урок «filter: blur, brightness, contrast, grayscale» бесплатный?
Да — полный текст урока «filter: blur, brightness, contrast, grayscale» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «filter: blur, brightness, contrast, grayscale»?
Применяйте к элементам фотографические эффекты фильтра с помощью функций свойства filter в CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «filter: blur, brightness, contrast, grayscale»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- filter: blur, brightness, contrast, grayscale
- backdrop-filter для матового стекла
- mix-blend-mode для смешивания слоёв
- Свойство isolation