CSS-фильтры
Визуальные эффекты, такие как размытие и насыщенность, применяются к элементам через свойство CSS filter.
Оно принимает следующие функции фильтра:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()
Функция CSS blur()
Элементы размывает функция фильтра blur(), и размытие растёт вместе со значением.
Без значения используется 0, что не даёт никакого эффекта.
Пример
Две разные степени размытия на элементах <img>:
Prompt
Создайте HTML-страницу, которая применяет к двум изображениям разные эффекты CSS-фильтра blur. Первое изображение должно иметь размытие 2px, а второе — 6px, с использованием свойства CSS filter.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Blur Filter</title>
<style>
#img1 {
filter: blur(2px);
}
#img2 {
filter: blur(6px);
}
</style>
</head>
<body>
<h2>CSS blur() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>blur(2px):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>blur(6px):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS brightness()
Насколько ярким выглядит элемент, определяет функция фильтра brightness().
- 0% делает изображение полностью чёрным
- Любое значение ниже 100% затемняет изображение
- 100% — значение по умолчанию, сохраняющее исходную яркость
- Любое значение выше 100% делает изображение ярче
Пример
Одно изображение, показанное и ярче, и темнее оригинала:
Prompt
Создайте HTML-страницу, которая изменяет яркость двух изображений с помощью свойства CSS filter. Первое изображение должно быть ярче на 150%, а второе темнее на 50%.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Brightness Filter</title>
<style>
#img1 {
filter: brightness(150%);
}
#img2 {
filter: brightness(50%);
}
</style>
</head>
<body>
<h2>CSS brightness() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>brightness(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>brightness(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS contrast()
Повышать или понижать контрастность элемента позволяет функция фильтра contrast().
- 0% делает изображение полностью серым
- Ниже 100% контрастность снижается
- 100% — значение по умолчанию, сохраняющее исходную контрастность
- Выше 100% контрастность растёт
Пример
Изображение с повышенной, а затем с пониженной контрастностью:
Prompt
Создайте HTML-страницу, которая изменяет контрастность двух изображений с помощью свойства CSS filter. У первого изображения контрастность должна быть увеличена до 150%, а у второго — уменьшена до 50%.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Contrast Filter</title>
<style>
#img1 {
filter: contrast(150%);
}
#img2 {
filter: contrast(50%);
}
</style>
</head>
<body>
<h2>CSS contrast() Filter</h2>
<p>Original image:</p>
<img src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>contrast(150%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>contrast(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS drop-shadow()
Чтобы добавить изображению эффект отбрасываемой тени, используйте функцию фильтра drop-shadow().
Пример
Два разных эффекта drop-shadow на одном изображении:
Prompt
Создайте HTML-страницу, которая применяет к двум изображениям разные эффекты CSS-фильтра drop-shadow. У первого должна быть серая тень (8px 8px 10px), а у второго — светло-голубая тень (10px 10px 7px).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Drop Shadow Filter</title>
<style>
#img1 {
filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
filter: drop-shadow(10px 10px 7px lightblue);
}
</style>
</head>
<body>
<h2>CSS drop-shadow() Filter</h2>
<p>drop-shadow(8px 8px 10px gray):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>drop-shadow(10px 10px 7px lightblue):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS grayscale()
Преобразованием изображения в оттенки серого занимается функция фильтра grayscale().
- 0% (или 0) оставляет изображение без изменений
- 100% (или 1) делает изображение полностью в оттенках серого
Пример
Одно и то же изображение с разными уровнями оттенков серого:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра grayscale с помощью свойства CSS filter. Используйте значения 1, 60% и 0.4 соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grayscale Filter</title>
<style>
#img1 {
filter: grayscale(1);
}
#img2 {
filter: grayscale(60%);
}
#img3 {
filter: grayscale(0.4);
}
</style>
</head>
<body>
<h2>CSS grayscale() Filter</h2>
<p>grayscale(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>grayscale(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>grayscale(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS hue-rotate()
С функцией фильтра hue-rotate() цвета элемента поворачиваются по цветовому кругу.
Её значение — это количество градусов, на которое изменяется изображение. При 0deg вы видите исходное изображение, положительные значения увеличивают оттенок, а отрицательные — уменьшают его.
Пример
Одно и то же изображение с разными поворотами цвета:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра hue-rotate с помощью свойства CSS filter. Используйте значения 200deg, 90deg и -90deg соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Hue Rotate Filter</title>
<style>
#img1 {
filter: hue-rotate(200deg);
}
#img2 {
filter: hue-rotate(90deg);
}
#img3 {
filter: hue-rotate(-90deg);
}
</style>
</head>
<body>
<h2>CSS hue-rotate() Filter</h2>
<p>hue-rotate(200deg):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>hue-rotate(90deg):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>hue-rotate(-90deg):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS invert()
Используйте функцию фильтра invert(), чтобы инвертировать цвета изображения.
- 0% (или 0) оставляет изображение без изменений
- 100% (или 1) полностью инвертирует цвета
Пример
Три уровня инверсии цветов на одном изображении:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра invert с помощью свойства CSS filter. Используйте значения 0.3, 70% и 100% соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Invert Filter</title>
<style>
#img1 {
filter: invert(0.3);
}
#img2 {
filter: invert(70%);
}
#img3 {
filter: invert(100%);
}
</style>
</head>
<body>
<h2>CSS invert() Filter</h2>
<p>invert(0.3):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>invert(70%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>invert(100%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS opacity()
Функция фильтра opacity() делает элемент частично или полностью прозрачным.
- 0% (или 0) делает элемент полностью прозрачным
- 50% (или 0.5) делает элемент прозрачным на 50%
- 100% (или 1) оставляет элемент без изменений
Пример
Одно и то же изображение с разными уровнями прозрачности:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра opacity с помощью свойства CSS filter. Используйте значения 80%, 50% и 0.2 соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Opacity Filter</title>
<style>
#img1 {
filter: opacity(80%);
}
#img2 {
filter: opacity(50%);
}
#img3 {
filter: opacity(0.2);
}
</style>
</head>
<body>
<h2>CSS opacity() Filter</h2>
<p>opacity(80%):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>opacity(50%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>opacity(0.2):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS saturate()
Интенсивность цвета, или насыщенность, — это то, что регулирует у элемента функция фильтра saturate().
- 0% (или 0) полностью убирает насыщенность
- 100% (или 1) оставляет элемент без изменений
- 200% (или 2) делает элемент сверхнасыщенным
Пример
Одно и то же изображение с разными уровнями насыщенности:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра saturate с помощью свойства CSS filter. Используйте значения 0, 100% и 200% соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Saturate Filter</title>
<style>
#img1 {
filter: saturate(0);
}
#img2 {
filter: saturate(100%);
}
#img3 {
filter: saturate(200%);
}
</style>
</head>
<body>
<h2>CSS saturate() Filter</h2>
<p>saturate(0):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>saturate(100%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>saturate(200%):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>
Функция CSS sepia()
Оттенок сепии — это более тёплый, коричнево-жёлтый цвет, и функция фильтра sepia() придаёт его изображению.
- 0% (или 0) оставляет изображение без изменений
- 100% (или 1) применяет полный эффект сепии
Пример
Одно и то же изображение с разными уровнями сепии:
Prompt
Создайте HTML-страницу, которая применяет к трём изображениям разные эффекты фильтра sepia с помощью свойства CSS filter. Используйте значения 1, 60% и 0.4 соответственно.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Sepia Filter</title>
<style>
#img1 {
filter: sepia(1);
}
#img2 {
filter: sepia(60%);
}
#img3 {
filter: sepia(0.4);
}
</style>
</head>
<body>
<h2>CSS sepia() Filter</h2>
<p>sepia(1):</p>
<img id="img1" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>sepia(60%):</p>
<img id="img2" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
<p>sepia(0.4):</p>
<img id="img3" src="img_5terre.jpg" alt="Five Terre" width="300" height="200">
</body>
</html>