Khi thiết kế một trang web, bạn có thể quyết định rằng bạn muốn thêm hiệu ứng mờ vào một hình ảnh cụ thể. Ví dụ:nếu bạn đang thiết kế trang web cho một quán cà phê, bạn có thể muốn làm mờ hình ảnh để có thể đặt văn bản phía trước hình ảnh cho người dùng đọc.
Đó là nơi xuất hiện chức năng làm mờ CSS. Chức năng làm mờ áp dụng hiệu ứng làm mờ cho hình ảnh đầu vào cụ thể, sau đó bạn có thể sử dụng hiệu ứng này với thuộc tính “bộ lọc” để làm mờ hình ảnh.
Hướng dẫn này sẽ thảo luận, một ví dụ, khái niệm cơ bản về chức năng làm mờ CSS và cách bạn có thể sử dụng nó để áp dụng hiệu ứng làm mờ cho hình ảnh trong mã của bạn. Khi đọc xong hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc sử dụng chức năng làm mờ CSS.
Bộ lọc CSS
Thuộc tính bộ lọc CSS cho phép bạn áp dụng các hiệu ứng đồ họa cho một phần tử trên trang web. Thông thường, thuộc tính bộ lọc được sử dụng để áp dụng bộ lọc cho hình ảnh và nền trên trang web.
Có một số bộ lọc khác nhau được cung cấp bởi CSS. Ví dụ, bộ lọc độ mờ cho phép bạn hiển thị một phần tử nhiều hơn hoặc ít hơn và bộ lọc đổ bóng cho phép bạn thêm bóng bên dưới một phần tử trên trang web.
Cú pháp để áp dụng bộ lọc như sau:
filter: filterName(arguments);
Đối với hướng dẫn này, chúng ta sẽ tập trung vào chức năng làm mờ CSS, chức năng này thêm hiệu ứng làm mờ cho hình ảnh.
CSS Blur
Bộ lọc làm mờ CSS là một chức năng bộ lọc bổ sung hiệu ứng làm mờ cho hình ảnh.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Cú pháp để sử dụng bộ lọc làm mờ như sau:
filter: blur(radius);
Trong cú pháp này, "radius" đề cập đến bán kính của hiệu ứng mờ sẽ được áp dụng. Giá trị bán kính bạn chỉ định càng lớn, thì độ mờ được thêm vào phần tử hình ảnh sẽ càng mạnh. Nếu bạn chỉ định giá trị “0”, thì phần tử hình ảnh sẽ không được thêm vào phần tử hình ảnh mà kiểu được áp dụng.
Giá trị bán kính bạn chỉ định có thể chấp nhận bất kỳ giá trị độ dài nào, chẳng hạn như em, px, rem và cm.
Hãy xem qua một ví dụ để minh họa cách hoạt động của chức năng này. Giả sử chúng ta đang thiết kế một trang web cho một quán cà phê địa phương. Trên trang chủ của quán cà phê, họ muốn hình ảnh cổ phiếu về một quán cà phê xuất hiện. Tuy nhiên, họ muốn hình ảnh đó xuất hiện với hiệu ứng mờ với bán kính 2px.
Chúng tôi có thể sử dụng chức năng làm mờ và thuộc tính bộ lọc để thực hiện nhiệm vụ này. Đây là mã chúng tôi có thể sử dụng để tạo một hình ảnh như vậy với chức năng làm mờ:
<html>
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" height="400" width="600" />
</html>
<style>
img {
filter: blur(2px);
}
</style>
Mã của chúng tôi trả về:
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong tệp HTML của chúng tôi, chúng tôi đã sử dụng thẻ để thêm hình ảnh vào trang web của mình. Hình ảnh này liên kết đến một hình ảnh chứng khoán về cà phê. Chúng tôi sử dụng các thông số “chiều cao” và “chiều rộng” để đặt chiều cao và chiều rộng của hình ảnh tương ứng là 400px và 600px.
Trong mã CSS của chúng tôi, chúng tôi sử dụng thuộc tính bộ lọc và chức năng làm mờ để áp dụng hiệu ứng làm mờ cho tất cả các thẻ trên trang web của chúng tôi. Trong trường hợp này, chúng tôi chỉ định bán kính mờ là 2px, điều này sẽ thêm hiệu ứng mờ nhẹ cho hình ảnh của chúng tôi. Như bạn có thể thấy ở trên, hình ảnh ly cà phê chúng ta đang sử dụng hơi mờ do chúng ta đã sử dụng hiệu ứng làm mờ.
Ngoài ra, nếu chúng tôi muốn chỉ định bán kính mờ bằng cách sử dụng một đơn vị đo lường khác, chúng tôi có thể làm như vậy bằng cách thay thế “2px” bằng giá trị chúng tôi muốn sử dụng. Vì vậy, nếu chúng ta muốn hình ảnh của mình có độ mờ với bán kính mờ 1,15em, chúng ta có thể làm như vậy bằng cách thay thế bán kính mờ “2px” mà chúng ta đã chỉ định ở trên.
Kết luận
Chức năng làm mờ CSS cho phép bạn tạo độ mờ cho một phần tử hình ảnh trên trang web. Chức năng này được sử dụng kết hợp với thuộc tính bộ lọc để áp dụng hiệu ứng làm mờ cho hình ảnh.
Hướng dẫn này thảo luận những điều cơ bản về bộ lọc CSS và cách sử dụng chức năng làm mờ để thêm hiệu ứng làm mờ cho hình ảnh trên trang web. Giờ đây, bạn đã được trang bị kiến thức cần thiết để thêm hiệu ứng làm mờ vào hình ảnh như một người chuyên nghiệp!