/ / Cách sử dụng Bộ lọc CSS và Chế độ hòa trộn để tạo hiệu ứng hình ảnh

Cách sử dụng Bộ lọc CSS và Chế độ hòa trộn để tạo hiệu ứng hình ảnh

Bộ lọc CSS và các chế độ hòa trộn cho phép bạn dễ dàng áp dụng các hiệu ứng hình ảnh cho trang web của mình. Bộ lọc là một tập hợp các chức năng CSS được xác định trước được sử dụng để điều chỉnh việc hiển thị hình ảnh hoặc các phần tử HTML khác. Trong khi các chế độ hòa trộn xác định cách một phần tử sẽ hòa trộn với nền của nó hoặc các phần tử lân cận.


Sử dụng bộ lọc CSS

Bạn áp dụng các bộ lọc CSS bằng cách sử dụng lọc thuộc tính và thuộc tính chỉ định loại hiệu ứng được áp dụng. Mỗi thuộc tính bộ lọc là một hàm CSS, hoạt động tương tự như hàm biến CSS. Nó chấp nhận một tham số để chỉ định mức độ ảnh hưởng của bộ lọc đối với phần tử được tạo kiểu.

Có 10 chức năng bộ lọc CSS có sẵn để tạo kiểu cho phần tử HTML của bạn:

  • mơ hồ()
  • độ sáng()
  • sự tương phản()
  • bóng đổ ()
  • thang độ xám()
  • hue-rotate()
  • đảo ngược()
  • độ mờ()
  • bão hòa ()
  • nâu đỏ()

Bạn có thể sử dụng các bộ lọc này riêng lẻ hoặc kết hợp để tạo các kiểu độc đáo và nâng cao hình thức của các thành phần HTML của mình.

Một số bộ lọc này hoạt động tốt hơn nhiều với những bộ lọc khác khi được sử dụng đúng cách.

Dưới đây là các ví dụ về việc kết hợp các bộ lọc CSS để đạt được các hiệu ứng hình ảnh khác nhau trên một phần tử hình ảnh.

1. Thang độ xám và Nâu đỏ

Các thang độ xám() bộ lọc loại bỏ tất cả thông tin màu khỏi một phần tử hình ảnh hoặc văn bản. Bộ lọc lấy giá trị từ 0 đến 1, với 0 nghĩa là màu gốc và 1 là hiệu ứng thang độ xám đầy đủ.

Các nâu đỏ() bộ lọc áp dụng hiệu ứng tông màu nâu đỏ cho phần tử hình ảnh hoặc văn bản. Bộ lọc cũng nhận giá trị từ 0 đến 1.

Ví dụ:

 img {
  filter: grayscale(14%) sepia(30%);
}

kết hợp thang độ xám() ở mức 14% và nâu đỏ() ở mức 30% có thể tạo hiệu ứng cổ điển hoặc cổ điển trên hình ảnh của bạn.

người phụ nữ với một máy tính trên đùi. hiệu ứng thang độ xám & nâu đỏ được áp dụng

2. Đảo ngược và bão hòa

Các bão hòa () bộ lọc tăng hoặc giảm độ bão hòa của phần tử hình ảnh hoặc văn bản. Bộ lọc lấy giá trị từ 0 đến vô cùng, với 1 là màu gốc và giá trị cao hơn làm tăng độ bão hòa.

Các đảo ngược() bộ lọc sẽ đảo ngược màu sắc của một thành phần hình ảnh hoặc văn bản bằng cách lật 180 độ sắc thái của mọi màu hiện có trên bánh xe màu. Điều này có nghĩa là bộ lọc thay đổi độ sáng và mức độ bão hòa của phần tử trong khi vẫn duy trì màu sắc.

Ví dụ:

 img {
  filter: invert(30%) saturate(75%);
}

Mã này đảo ngược màu sắc của hình ảnh và tăng độ bão hòa lên 75%.

người phụ nữ với máy tính xách tay trên đùi. hiệu ứng đảo ngược và bão hòa được áp dụng

3. Hue-Xoay và Tương phản

Các hue-rotate() bộ lọc xoay màu của phần tử hình ảnh hoặc văn bản, nghĩa là nó thay đổi màu tổng thể của phần tử trong khi vẫn duy trì mức độ sáng và độ bão hòa. Lượng xoay có thể được chỉ định theo độ, với 0 đại diện cho màu gốc và 360 đại diện cho một vòng quay hoàn toàn trở lại màu gốc.

Kết hợp các hue-rotate() Và sự tương phản() các bộ lọc có thể tạo hiệu ứng rực rỡ và đầy màu sắc cho hình ảnh của bạn.

Ví dụ:

 img {
  filter: hue-rotate(10deg) contrast(150%);
}

Hue-rotate có thể chấp nhận giá trị là độ, tốt nghiệp, radhoặc xoay. Đoạn mã trên xoay màu sắc của hình ảnh thêm 10 độ và tăng độ tương phản.

người phụ nữ với một máy tính trên đùi. hiệu ứng xoay và tương phản màu sắc được áp dụng

4. Độ sáng và Độ mờ

Các bộ lọc độ sáng và độ mờ rất rõ ràng. Cái đầu tiên điều chỉnh độ sáng của hình ảnh của bạn và cái sau kiểm soát mức độ mờ được áp dụng.

Kết hợp các độ sáng() Và mơ hồ() các bộ lọc có thể tạo hiệu ứng mơ màng và mềm mại cho hình ảnh của bạn.

Ví dụ:

 img {
  filter: brightness(0.8) blur(5px);
}

Đoạn mã trên giảm độ sáng bằng cách 0,8 (80%) và áp dụng một 5px hiệu ứng mờ cho hình ảnh.

người phụ nữ với máy tính xách tay trên đùi. hiệu ứng độ sáng và mờ được áp dụng

5. Drop-Shadow và Opacity

Hiệu ứng bóng đổ là một hiệu ứng hình ảnh trong đó một phần tử dường như đổ bóng lên bề mặt phía sau nó, tạo ảo giác về chiều sâu và chiều. Bóng đổ thường được áp dụng cho văn bản hoặc hình ảnh để tạo cảm giác tách biệt giữa phần tử và nền.

Trong khi đó, bộ lọc độ mờ kiểm soát độ trong suốt của một phần tử.

Kết hợp các bóng đổ () Và độ mờ() bộ lọc có thể tạo hiệu ứng tinh tế trên các thành phần văn bản của bạn.

Ví dụ:

 .text-effect {
  transform: translate(-50%, -50%);
  color: black;
  drop-shadow: 10px 9px 9px beige;
  opacity: 70%;
}

Trong ví dụ này, bóng đổ được đặt ở vị trí 10 pixel ở bên phải và 9 pixel ở phía dưới, với bán kính mờ là 9 pixel. Màu bóng được chỉ định là màu be. Độ mờ 70% cũng được chỉ định.

văn bản xin chào thế giới được phủ lên trên một Người phụ nữ có máy tính. hiệu ứng đổ bóng & độ mờ được áp dụng cho văn bản

Sử dụng Chế độ hòa trộn CSS

Các chế độ hòa trộn CSS kiểm soát cách nội dung của phần tử hòa trộn với nền hoặc các phần tử khác, cho phép tạo ra các hiệu ứng bố cục sáng tạo.

Một số trường hợp sử dụng phổ biến nhất cho các chế độ hòa trộn CSS bao gồm:

  • Tạo độ dốc: Chế độ hòa trộn có thể được sử dụng để tạo một số chuyển màu nền CSS chuyển tiếp giữa các màu, mang đến cho bạn một cách dễ dàng và hiệu quả để thêm chiều sâu và kích thước cho thiết kế của mình.
  • Thêm kết cấu: Bạn cũng có thể sử dụng các chế độ hòa trộn để thêm họa tiết vào nền, hình ảnh và các thành phần khác trên trang. Đây có thể là một cách tuyệt vời để tạo giao diện độc đáo và thêm sự quan tâm trực quan vào các yếu tố đơn giản khác.
  • Điều chỉnh màu sắc: Với chế độ hòa trộn, bạn có thể điều chỉnh màu của các thành phần trên trang, bao gồm điều chỉnh màu nền. Điều này sẽ cho phép bạn dễ dàng tạo các hiệu ứng như lớp phủ màu hoặc hình ảnh có tông màu.

Hai chế độ hòa trộn phổ biến nhất là chế độ hòa trộn nền Và chế độ hòa trộn. Cả hai thuộc tính đều có chung 15 giá trị: bình thường, nhân lên, màn hình, lớp phủ, làm tối, làm sáng, tránh màu, độ bão hòa, cháy màu, độ sáng, khác biệt, ánh sáng cứng, ánh sáng dịu, loại trừ và màu sắc.

Bạn nên sử dụng chế độ hòa trộn nền khi bạn có nhiều bố cục nền, chẳng hạn như hình ảnh nền trên một phần tử và muốn tất cả chúng hòa trộn vào nhau.

Bạn cũng có thể sử dụng chế độ hòa trộn để trộn nội dung của một phần tử đã cho với nội dung của phần tử mẹ trực tiếp của nó. Các chế độ hòa trộn thường được sử dụng để pha trộn nội dung nền trước như văn bản, hình dạng hoặc hình ảnh.

Đây là một ví dụ về việc sử dụng chế độ hòa trộn để trộn văn bản và hình ảnh.

HTML:

 <div class="container">
      <img
        src="https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2https://images.pexels.com/photos/3374210/pexels-photo-3374210.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
        class="background-image"
      />
      <div class="content">
        <h1>Welcome</h1>
        <p>Hello User!</p>
      </div>
</div>

CSS:

 .container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  mix-blend-mode: difference;
}
h1 {
  font-size: 60px;
  color: white;
}
p {
  font-size: 40px;
  color: white;
}

Các sự khác biệt chế độ hòa trộn tính toán sự khác biệt tuyệt đối giữa các giá trị màu của văn bản và hình ảnh tối bên dưới.

Trong trường hợp này, màu văn bản sẽ tương tác với nền tối, dẫn đến hiệu ứng tương phản cao.

Văn bản chào mừng pha trộn ánh sáng bầu trời đêm với chế độ hòa trộn hỗn hợp

Kết hợp Bộ lọc và Chế độ hòa trộn

Bạn có thể kết hợp các bộ lọc và chế độ hòa trộn để tạo ra các hiệu ứng trực quan thú vị hơn nữa. Bằng cách sử dụng cả hai thuộc tính cùng nhau, bạn có thể đạt được kết quả độc đáo và sáng tạo khó có thể sao chép bằng các thuộc tính CSS khác.

Đây là một ví dụ kết hợp bộ lọc và chế độ hòa trộn để tạo hiệu ứng phức tạp hơn:

 .my-element {
  filter: brightness(150%) hue-rotate(180deg) drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  mix-blend-mode: screen;
}

Mã này kết hợp các bộ lọc; độ sáng, màu xoay, đổ bóngvà một chế độ hòa trộn có giá trị màn hình đến hình ảnh. Nó tăng độ sáng lên 150%, trong khi hxoay ue sẽ đảo ngược màu sắc của hình ảnh 180 độ.

Sau đó, một bóng đổ cũng được áp dụng. Cuối cùng, màn hình giá trị cho chế độ hòa trộn sẽ kết hợp các màu của hình ảnh với nền bên dưới, dẫn đến hiệu ứng trong đó các màu sáng hơn được tăng cường và các màu tối hơn được hòa trộn với nền.

một hình ảnh của một người phụ nữ với bộ lọc kết hợp và chế độ hòa trộn được áp dụng

Làm chủ bộ lọc và chế độ hòa trộn

Bạn đã tìm hiểu về các loại bộ lọc CSS khác nhau và cách bạn có thể áp dụng chúng cho các phần tử HTML của mình. Bằng cách sử dụng các chức năng bộ lọc khác nhau như làm mờ, độ tương phản và xoay màu sắc, bạn có thể sửa đổi hình thức của hình ảnh. Bạn cũng đã thấy các ví dụ về các chế độ hòa trộn đang hoạt động và cách chúng có thể được sử dụng để tạo ra các thiết kế độc đáo.

Nếu bạn thử nghiệm nhiều hơn với các kỹ thuật này, bạn có thể tăng thêm mức độ thú vị về mặt hình ảnh cho các thiết kế của mình.

Bài viết liên quan:

  1. Cách sử dụng Kiểm tra màn hình để Kiểm tra màu Màn hình LCD và Màn hình TV của bạn
  2. Hơn 100 phím tắt FL Studio cho Windows và Mac
  3. Mệt mỏi mật khẩu là gì và làm thế nào bạn có thể ngăn chặn nó?
  4. 4 tài nguyên Reedsy giúp bạn viết các ký tự tốt hơn

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *