Thay đổi độ trong của Màu sắc trong Thiết kế Web - những chiếc núm vú

Trong nhiều năm, các nhà thiết kế web đã sử dụng tính minh bạch trong các trang web bằng cách lưu hình ảnh ở định dạng PNG hoặc GIF và làm cho một màu trong suốt. Mặc dù phương pháp này không lý tưởng, nó đã làm việc như một cách để làm cho hình ảnh có vẻ "nổi" trên một trang và để lớp một hình ảnh trên một trang khác bằng cách đặt một hình ảnh trong một trang trên hình nền.

Nhờ CSS 3, bây giờ bạn có thể tạo ra nền trong suốt và thậm chí chỉ định mức độ mờ đục khác nhau để tạo ra các hiệu ứng thiết kế tinh tế hơn cho các trang được hiển thị trên iPhone và iPad. Bạn có thể sử dụng thuộc tính opacity với màu RGBa để tạo các tính năng minh bạch tinh vi trong thiết kế của bạn, chẳng hạn như danh sách điều hướng thả xuống minh bạch thể hiện trong hình này.

Thay đổi độ đục của nền phía sau danh sách thả xuống cho phép hình ảnh đằng sau nó hiển thị và tạo ra một hiệu ứng thiết kế tinh tế hơn.

Trong ví dụ được hiển thị, nền của trình đơn được làm bằng màu xám trong suốt hơn là màu xám rắn được sử dụng trong cùng thiết kế thể hiện trong hình này.

Các thiết lập opacity trong CSS 3 mang lại sự linh hoạt tuyệt vời với tùy chọn sử dụng màu RGBa và để xác định độ trong suốt.