<span class="text-gradient">1<s class="hs"></s>073<s
class="hs"></s>498</span>
Посмотрите примеры в Хроме или Сафари:
Оказалось, такому тексту нельзя просто взять и добавить падающую тень — она всплывает над градиентом, что даёт странный эффект:
Чтобы совместить тень и градиент, пришлось добавить ещё один элемент, продублировать текст и чуть усложнить стиль:
<style>
.text-gradient {
position: relative;
color: transparent;
white-space: nowrap;
text-shadow: 0 2px 1px rgba(0, 0, 0, .5);
}
.text-gradient .gradient {
position: absolute;
left: 0;
font-style: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
color: #2aab33;
background-image: -webkit-linear-gradient(#b0fb68, #2aab33);
background-image: -o-linear-gradient(transparent, transparent);
}
</style>
<span class="text-gradient">1<s class="hs"></s>073<s
class="hs"></s>498<i class="gradient">1<s
class="hs"></s>073<s class="hs"></s>498</i></span>
-
1
0734981073498
24758742475874
Если этот градиент несёт только декоративно-карамельную функцию, я бы не стал заморачиваться с остальными браузерами и остановился. Все невебкитовые браузеры покажут цветной текст по возможности с тенью.
Если градиент важен (часть фирстиля) или дизайнер настаивает, я нарезал бы цифры в Фотошопе и составлял числа из картинок.
|