Я хотел бы знать, возможно ли будет воспроизвести эффект, подобный нижней части списка Top Tweets, с чистым CSS?
Эффект Gradient alpha исчезает с помощью CSS 3
Ответ 1
Да, вы можете! Используя преимущества цветов RGBa и градиентов CSS3, мы можем применять следующие стили к элементу и иметь затухающий полупрозрачный фон:
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));
(Обновлено после изменения градиентов Webkit)
К сожалению, это работает только в Firefox 3.6+, Safari и Chrome. Если вам нужен эффект в IE или более старых версиях Firefox, тогда вам будет лучше использовать полупрозрачный PNG, как это делает Twitter.
Ответ 2
Хотя это не универсальное решение, оно работает на Safari/Webkit, поэтому приятно знать кого-то, кто занимается мобильными приложениями.
Итак, предположим, что вы только обращаетесь к webkit, у вас есть эта приятная функция, описанная здесь.
-webkit-mask-image: -webkit-gradient(...)
Это также помогает вам, когда вы не можете подделать затухание с помощью некоторого наложенного элемента. (например, с изображением на фоне вместо сплошного цвета)
В остальном перейдите к приведенному выше.
Ответ 3
Если вы хотите использовать более современный синтаксис направления для градиента, используйте to bottom
, как в
background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));