css - CSS3 is it possible to add text-gradient yet? -
i looking adding gradient in text. net tuts have quick tips that. webkit browsers. quite old post checking if there cross browser solution (disregard ie).
i know how use background gradient image
the way know working in firefox through svg, unfortunately bit clumsy. part is should work in opera , ie9 (untested). work in firefox 3.6 if doctype declared xhtml , served xml (ugh).
<svg height="200" width="500"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(60,60,60); stop-opacity:1"/> </lineargradient> </defs> <text x="0" y="150" font-family="arial black, arial" font-size="55" fill="url(#gradient)" letter-spacing="-1" class="svg_text"> nice gradient </text> </svg>
check out on jsfiddle http://jsfiddle.net/shaww/
Comments
Post a Comment