Эффект градиента альфа исчезает с помощью CSS 3

Question

Хотелось бы узнать, можно ли будет воспроизвести эффект, подобный нижней части списка Top Tweets, с чистым CSS?

http://www.twitter.com

Answer 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.

Answer 2

Хотя это не всестороннее решение, оно работает в Safari / Webkit - поэтому приятно знать, кто работает с мобильными приложениями.

Итак, предположим, что вы обращаетесь только к webkit, вы описали эту замечательную функцию здесь .

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

Это также помогает вам, когда вы не можете подделатьзатухание с некоторым наложенным элементом.(например, изображение на фоне вместо сплошного цвета)

В остальном следуйте приведенному выше.