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

голоса
10

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

http://www.twitter.com

Задан 23/08/2010 в 00:23
источник пользователем
На других языках...                            


3 ответов

голоса
19

Да, ты можешь! Пользуясь 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 делает.

Ответил 23/08/2010 в 02:30
источник пользователем

голоса
1

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

Итак, предположим , что вы только адрес WebKit, вы получили это хороший признак , описанный здесь .

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

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

Для остальных, идти с вышесказанным.

Ответил 28/05/2013 в 14:37
источник пользователем

голоса
0

Если вы хотите использовать более до синтаксиса направления даты для градиентного использования to bottom, как в

background: -webkit-linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));
Ответил 02/09/2019 в 12:45
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more