Jquery ile Yazıya Gradient Renk Verme

Bazı web sitelerinde mutlaka görmüşsünüzdür, yazılara gradient şekilde renk verildiğini. Normalda bunu css ile yapmak için resim olarak kullanmak gerekiyor veya tek tek renk vermek gerekiyor.
Ancak jquery’nin bir eklentisi ile bunu çok daha basitçe yapabiliyoruz.

Uygulamaya ait tüm kaynak dosyalarını ve demosunu buradan indirebilirsiniz.

İlk sayfamıza jquery 3.2.1 ve gradient text dosyalarını ekliyoruz.

<script src="jquery-3.2.1.slim.min.js" />
<script src="jquery.gradient.text.js" />

daha sonra yazımızı yazıyoruz. (Ben büyük görünmesi için h2 içerisinde yazdım.)

<h2>
<span class="gradient-text" data-gradient-text-range="FF0000, AA1100,FF7700,FF4400,FFDD00,FFBB11,00FF00,55AA00,0000FF,000055,8A2BE2,310062,C77DF3,4B0082">
" Serdar KARACA "
</span>
</h2>

Siz istediğin gibi renkler ile oynarak daha güzel gradient’ler ortaya çıkartabilirsiniz.