Я много пробовал для текстового градиента. Я нашел код для сафари и хром, но он несовместим в других браузерах. Я хочу, чтобы он работал без использования фонового изображения. Если у вас есть правильное решение, любезно предоставите.
Кросс-браузерный градиент текста в чистом css без использования фонового изображения
Ответ 1
Я нашел, что лучший способ сделать это - использовать SVG-градиенты, это легко сделать и не требует никаких изображений, ниже приведен код, который создает простой градиент текста с помощью SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>
Ответ 2
<style type="text/css">
h1 {
font-family: "Myriad Pro", sans-serif;
font-size: 40px;
font-weight: normal;
}
/* --- start of magic ;-) --- */
.white-gradient {
position: relative;
}
.white-gradient:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
/* --- end of magic ;-) --- */
</style>
<h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>
Ответ 3
Вы можете сделать это с помощью плагинов jQuery.
Возможно, у Cufon-плагина тоже есть это, вы должны это проверить. Это также можно сделать с помощью плагина Рафаэля или SVG и VML, но найти сложное кросс-браузерное решение для CSS трудно.
Только для Chrome и Safari:
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
Для остальных браузеров вы должны использовать JavaScript.