Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến hiệu ứng bộ lọc

Các thuộc tính CSS liên quan đến hiệu ứng bộ lọc

Bài viết này giải thích các thuộc tính CSS liên quan đến hiệu ứng bộ lọc.

Bạn có thể tìm hiểu về cách sử dụng và cách viết các thuộc tính như filter và transform.

YouTube Video

HTML để Xem trước

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>

Hiệu ứng lọc

Thuộc tính 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}

Thuộc tính filter được sử dụng để áp dụng các hiệu ứng hình ảnh cho các phần tử. Bạn có thể dễ dàng thêm nhiều hiệu ứng như làm mờ hình ảnh hoặc phần tử, điều chỉnh độ sáng và thay đổi độ tương phản.

  • Lớp filtered-image-sepia đã được áp dụng hiệu ứng sepia.
  • Lớp filtered-image-opacity đã được áp dụng hiệu ứng độ mờ.
  • Lớp filtered-image-multiple đã áp dụng các hiệu ứng độ sáng, độ tương phản, và sepia cho hình ảnh.

Cú pháp Cơ bản 

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

Đối với thuộc tính filter, chỉ định none hoặc một filter-function.

  • Chỉ định none sẽ không áp dụng hiệu ứng bộ lọc nào.
  • Chỉ định chức năng bộ lọc cần áp dụng trong <filter-function>. Có thể chỉ định nhiều bộ lọc bằng cách tách chúng bằng khoảng trắng.

Các loại chức năng bộ lọc

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

Chức năng blur() áp dụng hiệu ứng làm mờ.

  • Giá trị được chỉ định bằng pixel (px) và giá trị càng lớn, mức độ làm mờ càng mạnh.
brightness() 
1filter: brightness(1.5);

Chức năng brightness() điều chỉnh độ sáng.

  • Giá trị được chỉ định dựa trên 0 (hoàn toàn tối) đến 1 (độ sáng gốc). Chỉ định giá trị lớn hơn 1 sẽ làm phần tử sáng hơn.
contrast() 
1filter: contrast(2);

Chức năng contrast() điều chỉnh độ tương phản.

  • Giá trị được chỉ định dựa trên 0 (thang độ xám) đến 1 (độ tương phản gốc), và các giá trị lớn hơn 1 sẽ tăng cường độ tương phản.
grayscale() 
1filter: grayscale(1);

Chức năng grayscale() chuyển đổi phần tử thành đơn sắc.

  • Giá trị được chỉ định từ 0 (màu gốc) đến 1 (hoàn toàn đơn sắc).
hue-rotate() 
1filter: hue-rotate(90deg);

Hàm hue-rotate() xoay màu.

  • Giá trị được chỉ định bằng độ (deg), thay đổi màu sắc bằng cách xoay màu. Màu xoay trong phạm vi từ 0deg đến 360deg.
invert() 
1filter: invert(1);

Hàm invert() đảo ngược màu sắc.

  • Giá trị được chỉ định từ 0 (màu gốc) đến 1 (hoàn toàn bị đảo ngược).
opacity() 
1filter: opacity(0.5);

Hàm opacity() thay đổi độ trong suốt của một phần tử.

  • Giá trị được chỉ định trong phạm vi từ 0 (hoàn toàn trong suốt) đến 1 (mờ đục).
saturate() 
1filter: saturate(2);

Hàm saturate() điều chỉnh độ bão hòa.

  • Giá trị trong khoảng từ 0 (đơn sắc) đến 1 (độ bão hòa gốc), và chỉ định giá trị lớn hơn 1 sẽ tăng cường độ bão hòa.
sepia() 
1filter: sepia(1);

Hàm sepia() chuyển đổi sang tông màu nâu nhẹ (sepia).

  • Giá trị được chỉ định từ 0 (màu gốc) đến 1 (màu nâu hoàn chỉnh).

Áp dụng nhiều bộ lọc 

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

Có thể áp dụng nhiều bộ lọc, được ngăn cách bằng khoảng trắng.

Ưu điểm của việc sử dụng thuộc tính filter

Thuộc tính filter là một công cụ mạnh mẽ để dễ dàng tạo các phần tử hấp dẫn về mặt thị giác. Nó có các ưu điểm sau:.

  • Hiệu ứng hình ảnh có thể được thêm dễ dàng.
  • Hình ảnh có thể được chỉnh sửa chỉ bằng CSS, không cần phần mềm chỉnh sửa hình ảnh.
  • Hiệu ứng động có thể được tạo bằng cách kết hợp với hoạt ảnh.

Thuộc tính 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}

Thuộc tính transform được sử dụng để áp dụng các chuyển đổi 2D hoặc 3D cho các phần tử. Các chuyển đổi hình ảnh khác nhau như vị trí, xoay, phóng to/thu nhỏ và làm xiên có thể được chỉ định bằng CSS. Thuộc tính transform thường được sử dụng kết hợp với hoạt ảnh và giúp tạo các phần tử giao diện người dùng động.

  • Trong lớp transform-scale, khi di chuột qua phần tử, chiều rộng của nó sẽ tăng lên gấp 1,5 lần và chiều cao gấp 2 lần.

  • Trong lớp transform-skew, khi di chuột qua phần tử, nó sẽ nghiêng 30 độ trên trục X và 20 độ trên trục Y.

  • Trong lớp transform-rotate, khi di chuột qua phần tử, nó sẽ xoay 45 độ và tăng kích thước lên gấp 1,5 lần.

Cú pháp Cơ bản 

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

Thuộc tính transform chỉ định hoặc là none hoặc một transform-function.

  • Nếu none được chỉ định, sẽ không có sự chuyển đổi nào được áp dụng.
  • Chỉ định loại chuyển đổi với <transform-function>. Có thể áp dụng nhiều chuyển đổi bằng cách tách chúng bằng dấu cách.

Các hàm chuyển đổi chính

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 */
  • Hàm translate(x, y) di chuyển một phần tử một khoảng cách nhất định theo các trục X và Y. Chỉ định x và y bằng các đơn vị như px hoặc %. Bạn cũng có thể chỉ định riêng lẻ với translateX() hoặc translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Hàm rotate(angle) xoay một phần tử theo góc được chỉ định bằng độ (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 */
  • Hàm scale(x, y) phóng to hoặc thu nhỏ một phần tử theo các trục X và Y. x và y là các hệ số tỷ lệ so với kích thước ban đầu. Ví dụ: scale(2, 2) sẽ làm tăng kích thước gấp đôi. Bạn có thể chỉ định riêng lẻ với scaleX() hoặc 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);
  • Hàm skew(x-angle, y-angle) làm nghiêng một phần tử theo các góc chỉ định trên trục X và Y. Bạn có thể chỉ định riêng lẻ với skewX() hoặc skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • Hàm matrix() chỉ định một ma trận để kết hợp cùng lúc nhiều chuyển đổi. Nó thường được sử dụng kết hợp với các hàm chuyển đổi khác.

Các hàm chuyển đổi 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;
  • Hàm translate3d() thực hiện việc dịch chuyển trong không gian 3D.
    • Nó có thể được chỉ định theo ba chiều: trục X, Y và Z.
  • Bằng cách thiết lập thuộc tính transform-style thành preserve-3d và thuộc tính perspective thành 600px, hiệu ứng di chuyển ba chiều với độ sâu sẽ được áp dụng cho các phần tử con.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • Hàm rotate3d() thực hiện việc xoay trong không gian 3D.
    • Nó xoay một phần tử dựa trên các trục X, Y và Z.

Kết hợp nhiều phép biến đổi 

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

Thuộc tính transform có thể áp dụng nhiều phép biến đổi đồng thời. Ví dụ, bạn có thể kết hợp xoay và phóng to/thu nhỏ.

Các điểm chính khi sử dụng

Thuộc tính transform là một công cụ mạnh mẽ trong CSS để biến đổi trực quan các phần tử. Bằng cách kết hợp nhiều hàm khác nhau, bạn có thể tạo ra giao diện người dùng tương tác và động.

  • Thuộc tính transform cho phép biến đổi trực tiếp các phần tử, giúp thao tác trực quan mà không thay đổi bố cục DOM.
  • Nó rất hữu ích để tạo hoạt họa và các phần tử tương tác, cho phép thiết kế động khi kết hợp với transition hoặc animation.

Thuộc tính 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}

Thuộc tính transform-origin được sử dụng để đặt điểm gốc cho các phép biến đổi được áp dụng bởi thuộc tính transform. Bạn có thể chỉ định điểm tham chiếu cho các phép biến đổi của phần tử, cho phép bạn kiểm soát vị trí mà hiệu ứng như xoay hoặc phóng to được áp dụng.

Trong ví dụ này, khi bạn di chuột qua phần tử, nó sẽ xoay và phóng to/thu nhỏ đồng thời dựa trên điểm gốc được chỉ định bởi thuộc tính transform-origin.

Cú pháp Cơ bản 

1transform-origin: x y z;

Đối với thuộc tính transform-origin, bạn chỉ định x, y và z như thế này.

  • Đối với x, hãy chỉ định điểm tham chiếu trên trục X (hướng ngang). Các giá trị có thể được chỉ định bằng từ khóa (left, center, right) hoặc độ dài (px, %, v.v.).
  • Đối với y, hãy chỉ định điểm tham chiếu trên trục Y (hướng dọc). Các giá trị có thể được chỉ định bằng từ khóa (top, center, bottom) hoặc độ dài.
  • Đối với z, hãy chỉ định điểm tham chiếu trên trục Z (hướng sâu). Nó chỉ có thể được sử dụng với các phép biến đổi 3D. Nó không bắt buộc và giá trị mặc định là 0.

Giá trị mặc định 

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

Giá trị mặc định của thuộc tính transform-origin là trung tâm của phần tử cho cả trục X và trục Y. Điều này có nghĩa là, theo mặc định, các phép biến đổi được thực hiện với trung tâm của phần tử làm điểm tham chiếu.

Cách chỉ định giá trị

Các giá trị cho thuộc tính transform-origin có thể được chỉ định bằng từ khóa, phần trăm, độ dài như px, em, v.v.

  1. Chỉ định từ khóa

    • left: Đặt tham chiếu trục X tới cạnh trái của phần tử.
    • right: Đặt tham chiếu trục X tới cạnh phải của phần tử.
    • top: Đặt tham chiếu trục Y tới cạnh trên của phần tử.
    • bottom: Đặt tham chiếu trục Y tới cạnh dưới của phần tử.
    • center: Đặt tham chiếu trục X hoặc trục Y tới tâm của phần tử.

  2. Chỉ định theo phần trăm

    • 0%: Đặt tại cạnh trái hoặc cạnh trên.
    • 50%: Đặt tại tâm.
    • 100%: Đặt tại cạnh phải hoặc cạnh dưới.

  3. Chỉ định chiều dài

    • Bạn có thể điều chỉnh tham chiếu một cách chi tiết bằng cách sử dụng các đơn vị chiều dài cụ thể như px, em, v.v.

transform-origin trong các biến đổi 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 cũng có thể được sử dụng cho các biến đổi 3D. Trong các biến đổi 3D, bạn cũng có thể chỉ định điểm tham chiếu trên trục Z. Ví dụ, bằng cách chỉ định tâm quay trong hướng độ sâu, các biến đổi có cảm giác chiều sâu là khả thi.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến sự trong suốt