CSS3

CSS ile Kendi Fare İmlecinizi Oluşturun

css-cursorWeb 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 rahat.

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. Ondan 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 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, doğrusu bağlantılarda çıkan el işareti gözükecektir. Geriye kalan öteki fare imleçlerini de hatırlayalım.

css-cursor-custom

Kendi fare imlecimizi web sitemize ekleyelim.

Gene CSS’in cursor tanımını kullanıyoruz. Aynı arkaplan tanımlar şeklinde fare imleci tanımlayacağız.

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

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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu

Reklam engelleyici kullandığınız görülüyor

HAKANSEYHAN.com reklamlarla desteklenen bir sitedir. Sitemizde gezintiye devam etmek için lütfen reklam engelleyiciyi kapatın.