9
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?Gradient alpha mờ dần có hiệu lực với CSS 3
A
Trả lời
18
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.
0
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.
Bạn có thể làm cho nó hoạt động trong các trình duyệt IE cũ cũng như thông qua 'bộ lọc' (IE7 và cũ hơn) và' -ms-filter' (IE 8 & 9). Xem http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer và http://stackoverflow.com/questions/5159136/can-you-use-rgba-colours-in-gradients-produced -with-internet-explorers-filter-pr –
Điều này chỉ hoạt động nếu nền của đối tượng này có màu trắng hoặc tĩnh. Hãy tưởng tượng rằng đằng sau yếu tố này là một gradient hoặc một hình ảnh. – JLF