На моем веб-сайте я использую текстовый градиент для заголовка, но он работает только на Chrome и, вероятно, на Safari (хотя я его не тестировал), ниже приведен код, который я использую для градиента. Мне было интересно, есть ли способ достичь того же/подобного эффекта, который будет работать во всех трех браузерах?
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
РЕДАКТИРОВАТЬ: Проблема с другим опубликованным решением заключается в том, что он работает только на белом фоне, как кто-то сказал в комментариях, что не подходит для меня, поскольку я использую серый фон.
Если вы хотите, чтобы это работало в браузерах, отличных от WebKit, вам нужно использовать другое решение, кроме CSS.
Есть некоторые варианты JavaScript, или вы можете использовать SVG.
Вот хорошее сообщение в блоге о том, как это сделать: http://lea.verou.me/2012/05/text-masking-the-standards-way/
Использование JavaScript имеет недостаток... с использованием JavaScript, но в конце дня это только декоративный визуальный эффект.
-moz-background-clip: текст не работает на firefox, и вы не сможете добиться эффекта отсечения в Firefox.
Вы можете использовать cufon для текстовых градиентов, а thay будет работать на IE, Chrome и Firefox