CSS ile Kendi Fare İmlecinizi Oluşturun

Web sayfanızda kendi hazırladığınız bir resmi fare imleci olarak kullanmak ister misiniz? CSS’in cursor tanımı ile bunu yapmak mümkün. Hem de oldukça kolay.

Detaylar için makalemizin devamına göz atabilirsiniz.

CSS Cursor

CSS’in cursor tanımı yardımıyla birçok fare imlecini istediğimiz şekilde kullanabiliyoruz. Bir örnekle bu yapıyı tanıyalım. Sonrasında tüm varyasyonları gözden geçirelim. Son olarak da custom cursor oluşturalım.

İlk olarak fare imlecini değiştireceğimiz bir eleman oluşturalım.

<p>Burada uzun bir paragraf bulunduğunu varsayalım.</p>

Şimdi de fareyle bu paragrafın üstüne gelindiğinde değişik bir imleç çıkaralım.

pcursor:pointer

Böylece paragrafın üstüne gelindiğinde, pointer imleci, kısaca bağlantılarda çıkan el işareti gözükecektir. Geriye kalan öteki fare imleçlerini de hatırlayalım.

Kendi fare imlecimizi web sitemize ekleyelim.

Gene CSS’in cursor tanımını kullanıyoruz. Aynı arkaplan tanımlar benzer biçimde fare imleci tanımlayacağız.

cursor: url('fotoğraf URL'),auto;

Bu kadar kolay. Şimdi de son olarak Codepen üstünde sizler için hazırlamış olduğumuz örneği görüntüleyelim.