0

[CSS Tut] Hướng dẫn làm mờ hình nền – Hiệu ứng kính mờ hơi sương

Bạn đã từng thấy đâu đó hiệu ứng kính mờ, như ở trang nghe nhạc Deezer, mixRadio,… Bạn có thắc mắc chúng được làm như thế nào mà đẹp vậy? Đây cũng đang là một trào lưu trong thiết kế web hiện đại. Với hiệu ứng làm mờ background, người đọc sẽ tập trung vào chủ thể là nội dung, trong khi đó vẫn có thể nắm được ý tưởng minh họa thô ở bên dưới hình nền. Trong bài viết này, mình sẽ hướng dẫn các bạn tạo hiệu ứng với CSS, rất linh hoạt và dễ sử dụng hơn nhiều so với cách dùng hình ảnh.

DeezerGiao diện dịch vụ âm nhạc www.deezer.com

Chiêu cũ – Dùng ảnh đã được làm mờ:

Quay lại những năm 2008, để tạo được hiệu ứng kính mờ, quả thật là mất rất nhiều nỗ lực so với bây giờ nhiều. Do không có các css filter, ý tưởng lúc bấy giờ là dùng 2 lớp background với 2 hình ảnh khác nhau, 1 hình gốc ở lớp dưới, ở lớp trên (overlay) sẽ sử dụng 1 hình ảnh đã được làm mờ (?) – WTF – đã code còn phải edit hình trước!

DEMO

HTML

HTML rất đơn giản, ta có 1 thẻ bài viết với phần tiêu đề và một ít nội dung:

CSS

Đầu tiên là định vị tất cả các đối tượng vào cửa sổ trình duyệt. Sau đó, đặt một lớp overlay để làm background – với hình ảnh đã được làm mờ; cuối cùng thêm một lớp màu trắng ở giữa 2 background để chia tách 2 lớp, làm nền cho text, nếu không có, hiệu ứng opacity sẽ làm text cũng trong suốt và chìm xuống background dưới cùng, không thể đọc được. Overflow hidden là để tránh hiện ra phần scrollbar và cắt phần thừa overlay khớp vào .class.

Đoạn css trên tạo lớp kính mờ và sáng. Nhưng vẫn cần chỉnh vị trí cho nó xuống bottom trang, trừa 1 đoạn nhỏ để hiện thị header của box. Mình cũng dùng hiệu ứng transition của css để làm cho box text di chuyển lên xuống mượt mà hơn.

Tuyệt chiêu mới – Hiệu ứng kính mờ với CSS Filters

Chúng ta ko cần sử dụng hai hình ảnh khác nhau nữa, đơn giản là lớp overlay cũng dùng chung hình với background nhưng lại được làm mở bằng css filter:

CSS cách cũ

CSS cách mới

Hãy cẩn thận

Thật quá dễ dàng phải không? Rất tiếc, không phải mọi trình duyệt đề hỗ trợ filter blur, số lượng CSS filters tùy vào từng trình duyệt khác nhau. Có một chút may mắn là filter có một lịch sử lâu đầu với SVG trong HTML, và được hỗ trợ bởi hầu hết trình duyệt. Thế tại sao ta không dùng SVG luôn, cái khó khăn là ta cần phải có file SVG hay code SVG như dưới để tạo filter, việc này có thể mất công nên chỉ dùng nó như 1 phương pháp dự phòng thôi.

Để add SVG filter vào code css, ta dùng hàm url() để gọi tham chiếu tới id của SVG. Pro tip: bạn có thể encode SVG thành dạng data url và gọi trực tiếp trong url(), nhưng định dạng này hơi khó đọc trong bài viết.

Sẽ vẫn có một số trường hợp CSS hay SVG fitler không hỗ trợ, thì vẫn có một lớp lọc màu trắng, tuy ko mờ mờ nhưng cũng không đến nỗi quá tồi tàn!

(học lỏm từ css-tricks)

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

Leave a Reply

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