Gradient alpha mờ dần có hiệu lực với CSS 3

Question

Tôi muốn biết liệu có thể sao chép hiệu ứng như dưới cùng của danh sách Top Tweets bằng CSS thuần túy không?

http://www.twitter.com

Answer 1

Có bạn có thể! Lợi dụng RGBA màu và gradient CSS3, chúng ta có thể áp dụng các phong cách sau để một yếu tố và có một nền mờ dần bán trong suốt:

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1)); 

Webkit:

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1)); 

(Đã cập nhật sau khi thay đổi thành phần Webkit)

Đáng buồn thay, điều này chỉ hoạt động trong Firefox 3.6+, Safari và Ch rome. Nếu bạn cần hiệu ứng trong IE hoặc các phiên bản cũ hơn của Firefox, thì bạn nên sử dụng PNG bán trong suốt như Twitter.

Answer 2

Mặc dù đây không phải là một giải pháp toàn diện, nó hoạt động trên Safari/Webkit - vì vậy thật thú vị khi biết ai đó làm ứng dụng dành cho thiết bị di động.

Vì vậy, giả sử bạn chỉ giải quyết webkit, bạn đã có tính năng đẹp này được mô tả here.

-webkit-mask-image: -webkit-gradient(...) 

Điều này cũng giúp bạn khi bạn không thể giả mạo mờ dần với một số phần tử phủ lên. (ví dụ: có hình ảnh trên nền, thay vì màu đồng nhất)

Đối với phần còn lại, hãy làm như trên.