Jquery ile Yazıya Gradient Renk Verme

Last updated on 3 Haziran 2019

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.

  •  
  •  
  •  
  •  
  •  
  •  
  •  

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir