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 gayet basit.

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

CSS Cursor

CSS’in cursor tanımı sayesinde birçok fare imlecini istediğimiz şekilde kullanabiliyoruz. Bir örnekle bu yapıyı tanıyalım. Daha sonra 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 olduğunu varsayalım.</p>

Şimdi de fareyle bu paragrafın üzerine gelindiğinde farklı bir imleç çıkaralım.

p{cursor:pointer}

Böylece paragrafın üzerine gelindiğinde, pointer imleci, yani linklerde çıkan el işareti gözükecektir. Geriye kalan diğer fare imleçlerini de hatırlayalım.

Kendi fare imlecimizi web sitemize ekleyelim.

Yine CSS’in cursor tanımını kullanıyoruz. Aynı arkaplan tanımlar gibi fare imleci tanımlayacağız.

cursor: url('resim URL'),auto;

Bu kadar basit. Şimdi de son olarak Codepen üzerinde sizler için hazırladığımız örneği görüntüleyelim.