Articles
Введение в CSS
Свойства CSS, связанные с эффектами фильтра

Свойства CSS, связанные с эффектами фильтра

Эта статья объясняет свойства CSS, связанные с эффектами фильтра.

Вы можете узнать о применении и написании свойств, таких как filter и transform.

YouTube Video

HTML для предварительного просмотра

css-effect.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156            </section>
157        </article>
158    </main>
159</body>
160</html>

Фильтры

Свойство filter 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

Свойство filter используется для применения визуальных эффектов к элементам. Вы можете легко добавить различные эффекты, такие как размытие изображений или элементов, настройка яркости и изменение контраста.

  • Класс filtered-image-sepia имеет применённый эффект сепии.
  • Класс filtered-image-opacity имеет применённый эффект прозрачности.
  • К классу filtered-image-multiple применены эффекты яркости, контраста и сепии.

Базовый синтаксис 

1filter: none | <filter-function> [<filter-function>]*;

Для свойства filter укажите none или filter-function.

  • Указание none не применяет никаких эффектов фильтра.
  • Укажите функцию фильтра для применения в <filter-function>. Можно указать несколько фильтров, разделяя их пробелами.

Типы функций фильтров

blur() 
1filter: blur(5px);

Функция blur() применяет эффект размытия.

  • Значение указывается в пикселях (px), и чем больше значение, тем сильнее степень размытия.
brightness() 
1filter: brightness(1.5);

Функция brightness() регулирует яркость.

  • Значение указывается в диапазоне от 0 (полностью тёмное) до 1 (оригинальная яркость). Указание значения больше 1 делает элемент ярче.
contrast() 
1filter: contrast(2);

Функция contrast() регулирует контраст.

  • Значение указывается в диапазоне от 0 (чёрно-белое) до 1 (оригинальный контраст), а значения больше 1 усиливают контраст.
grayscale() 
1filter: grayscale(1);

Функция grayscale() переводит элемент в монохромный режим.

  • Значение указывается от 0 (оригинальный цвет) до 1 (полностью монохромный).
hue-rotate() 
1filter: hue-rotate(90deg);

Функция hue-rotate() поворачивает цветовой тон.

  • Значения задаются в градусах (deg), изменяя цвет за счет поворота цветового тона. Цветовой тон изменяется в диапазоне от 0deg до 360deg.
invert() 
1filter: invert(1);

Функция invert() инвертирует цвета.

  • Значения задаются от 0 (оригинальный цвет) до 1 (полностью инверсированный).
opacity() 
1filter: opacity(0.5);

Функция opacity() изменяет прозрачность элемента.

  • Значения задаются в диапазоне от 0 (полностью прозрачный) до 1 (непрозрачный).
saturate() 
1filter: saturate(2);

Функция saturate() регулирует насыщенность.

  • Значения варьируются от 0 (монохромный) до 1 (оригинальная насыщенность), а значения больше 1 усиливают насыщенность.
sepia() 
1filter: sepia(1);

Функция sepia() преобразует изображение в сепию.

  • Значения задаются от 0 (оригинальный цвет) до 1 (полный эффект сепии).

Применение нескольких фильтров 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Можно применять несколько фильтров, разделенных пробелами.

Преимущества использования свойства filter

Свойство filter является мощным инструментом для легкого создания визуально привлекательных элементов. Оно имеет следующие преимущества:.

  • Визуальные эффекты можно добавлять легко.
  • Изображения можно изменять, используя только CSS, без программ редактирования изображений.
  • Динамические эффекты можно создавать, комбинируя с анимациями.

Свойство transform 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

Свойство transform используется для применения 2D- или 3D-трансформаций к элементам. Различные визуальные трансформации, такие как перемещение, вращение, масштабирование (увеличение/уменьшение) и искажение, могут быть заданы с помощью CSS. Свойство transform часто используется в сочетании с анимациями и помогает создавать динамические элементы интерфейса.

  • В классе transform-scale наведение на элемент увеличивает его ширину в 1,5 раза и высоту в 2 раза.

  • В классе transform-skew наведение на элемент наклоняет его на 30 градусов по оси X и на 20 градусов по оси Y.

  • В классе transform-rotate наведение на элемент поворачивает его на 45 градусов и увеличивает его в 1,5 раза.

Базовый синтаксис 

1transform: none | <transform-function> [<transform-function>]*;

Свойство transform задает значение none или функцию преобразования (transform-function).

  • Если указано none, преобразование не будет применено.
  • Тип преобразования задается с помощью <transform-function>. Можно применять несколько преобразований, разделяя их пробелами.

Основные функции преобразования

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • Функция translate(x, y) перемещает элемент на заданные расстояния по осям X и Y. Для указания значений x и y используйте единицы измерения, такие как px или %. Можно задать значения отдельно с помощью translateX() или translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Функция rotate(angle) поворачивает элемент на заданный угол в градусах (deg).
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • Функция scale(x, y) изменяет размер элемента вдоль осей X и Y. x и y — это коэффициенты масштабирования относительно исходного размера. Например, scale(2, 2) увеличит размер вдвое. Можно задать значения отдельно с помощью scaleX() или scaleY().
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • Функция skew(x-angle, y-angle) наклоняет элемент на заданные углы по осям X и Y. Можно задать значения отдельно с помощью skewX() или skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • Функция matrix() задает матрицу для объединения нескольких преобразований одновременно. Обычно используется в сочетании с другими функциями преобразования.

Функции преобразования в 3D

translate3d() 
1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;
  • Функция translate3d() выполняет перемещение в 3D пространстве.
    • Она может быть задана в трех измерениях: по осям X, Y и Z.
  • Устанавливая свойство transform-style в значение preserve-3d и свойство perspective в 600px, к дочерним элементам применяется эффект трехмерного движения с глубиной.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • Функция rotate3d() выполняет вращение в 3D пространстве.
    • Она поворачивает элемент относительно осей X, Y и Z.

Объединение нескольких трансформаций 

1transform: rotate(45deg) scale(1.5);

Свойство transform позволяет применять несколько трансформаций одновременно. Например, вы можете объединить вращение и масштабирование.

Основные моменты использования

Свойство transform является мощным инструментом CSS для визуального преобразования элементов. Объединяя различные функции, вы можете создавать интерактивные и динамичные пользовательские интерфейсы.

  • Свойство transform позволяет напрямую преобразовывать элементы, обеспечивая визуальную манипуляцию без изменения структуры DOM.
  • Это свойство очень полезно для создания анимаций и интерактивных элементов, позволяя реализовывать динамичные дизайны в сочетании с transition или animation.

Свойство transform-origin 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}

Свойство transform-origin используется для задания точки отсчета для трансформаций, применяемых через свойство transform. Вы можете указать точку отсчета для трансформаций элементов, что позволяет контролировать, вокруг какой позиции применяются эффекты, такие как вращение или масштабирование.

В этом примере, когда вы наводите мышь на элемент, он одновременно вращается и масштабируется, основываясь на точке, заданной свойством transform-origin.

Базовый синтаксис 

1transform-origin: x y z;

Для свойства transform-origin вы задаете x, y и z следующим образом.

  • Для x задайте точку отсчета по оси X (горизонтальное направление). Значения можно задавать с помощью ключевых слов (left, center, right) или длины (px, % и т.д.).
  • Для y укажите точку отсчета по оси Y (вертикальное направление). Значения можно задавать с помощью ключевых слов (top, center, bottom) или длины.
  • Для z задайте точку отсчета по оси Z (направление глубины). Его можно использовать только с 3D-трансформациями. Это необязательный параметр, и значение по умолчанию — 0.

Значение по умолчанию 

1transform-origin: 50% 50%; /* Center of the element */

Значение по умолчанию для свойства transform-origin — центр элемента по осям X и Y. Это означает, что по умолчанию трансформации выполняются с центрированием элемента в качестве точки отсчета.

Как задавать значения

Значения для свойства transform-origin могут задаваться с использованием ключевых слов, процентов, единиц длины, таких как px, em и т.д.

  1. Указание ключевых слов

    • left: Устанавливает ссылку на ось X по левому краю элемента.
    • right: Устанавливает ссылку на ось X по правому краю элемента.
    • top: Устанавливает ссылку на ось Y по верхнему краю элемента.
    • bottom: Устанавливает ссылку на ось Y по нижнему краю элемента.
    • center: Устанавливает ссылку на ось X или Y по центру элемента.

  2. Указание в процентах

    • 0%: Устанавливает значение к левому или верхнему краю.
    • 50%: Устанавливает значение по центру.
    • 100%: Устанавливает значение к правому или нижнему краю.

  3. Указание длины

    • Вы можете точно настроить точку отсчёта, используя определённые единицы длины, такие как px, em и другие.

transform-origin в 3D-трансформациях 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin также может быть использован для 3D-трансформаций. В 3D-трансформациях вы также можете указать точку отсчёта на оси Z. Например, указывая центр вращения в направлении глубины, можно добиться трансформаций с ощущением глубины.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с прозрачностью