CSS CURSOR NEDİR?

Web sayfalarında CSS kullanarak fare imlecini değiştirebilirsiniz. CSS imleç özelliği imleç türünü yani (fare işaretçisi) tanımlamak için kullanılır.

Tarayıcılar genellikle bir web sayfasının boş bir parçası üzerinde ok fare imlecini görüntüler, herhangi bağlantı veya tıklanabilir madde ve herhangi bir metin veya metin alanı üzerinde düzenleme imleci olarak genelde eldivenli el fare işareti görürüz. CSS ile farklı imleçler görüntülemek için bu özellikleri yeniden tanımlayabilirsiniz.

ÖRNEK:

test {
     cursor: move;
     }
test1{
    cursor: progress;
    }

HTML:

<p class="test">Deneme yazısı</p>

<p class="test1">Deneme yazısı</p>

Aşagıda ki deneme yazısı üzerine gelerek imleçleri görüntüleyin

ÇIKTI:

Aşağıdaki tabloda çoğu tarayıcının kabul edeceği farklı imleçler göstermektedir.

CSS Custom(Özel) Cursors(İmleç)

Yukarıda ki imleçler sizin için yeterli gelmiyorsa son olarak CSS ile kendi özel imleçlerinizi oluşturabilirsiniz. Kullanıcı tanımlı imleçler URL gösterilerek birden fazla tanımla yapabilirsiniz.

İlk imleç yanlış belirtilmiş ya da bulunamıyor ise, virgülle ayrılmış listede bir sonraki imleç kullanılacak ve böylece bir kullanılabilir imleç bulununcaya kadar tarayıcı URL'ye bakacak bulamazsa default Değeri olarak "auto" yazılırsa tarayıcı varsayılanı gösterecek.

ÖRNEK:

a {
    cursor: url("custom.gif"), url("custom.cur"), default;
  }

Yukarıda örnekte "custom.gif" ve "custom.cur" özel imleç resimleri sırasıyla yüklenmeye çalışır Tarayıcı belirtilen adreslerde resimleri bulamazsa genel (varsayılı) imleci yükler.

NOT: ".cur " uzantısı imleçler için kullanılabilecek standart bir formatdır. ".jpeg", ".png" ve ".gif" dosyalarınıda gösterebilir ve dönüştürme yazılımlarla ".cur" uzantılı dosyaya dönüştürebilirsiniz.

NOT: Explorer tarayıcı sadece ".ani" animasyonlu dosya uzantısı ve ".cur" uzantılı dosya imleçlerini gösterir.

NOT: Özel imleç "url"'lerini yazdıktan sonra default değerinide yazın aksi takdirde tarayıcılar özel imleci göstermeyecekdir.

NOT: Firefox imleç boyut limiti 128 × 128px büyüklüğe kadar destekler. Daha Büyük imleç resimlerini göstermez. Ancak, işletim sistemleri ve platformlar ile maksimum uyumluluk için görüntü boyutu 32 × 32 ebatta sınırlamak gerekir.

ÖRNEK:

test {
     cursor: url("ok.png"), help;
     }
test1{
    cursor: url("dosya.png"), no-drop;
    }

HTML:

<p class="test">Deneme yazısı</p>

<p class="test1">Deneme klasör</p>

ÇIKTI:

ANİMASYONLU İMLEÇLER

Animasyonlu imleçli dosyalarını tarayıcılar gösteriyormu diye araştırma yaptım; Malasef 07.03.2015 itibariyle tarayıcılar göstermemektedir. ".Gif" uzantılı dosyalarını tarayıcılar göstermekte fakat animasyonsuz göstermekte.

Animasyonlu imleç dosyaları ".Ani" uzantılı dosyaları Tarayıcıların büyük çoğunluğunda çalışmıyor. Tüm 5 önemli web tarayıcıları imleci göstermedi. cursor: url ('animated.ani') , bu tür dosyayı sadece Explorer gösterir.

Animasyonlu imleç özelliği gelse Bazı web uygulamaları için derinlik katacağını düşünüyorum. JavaScript kullanarak bu sorunun üstesinden gelinebilir.

NOT: Eğer tüm sayfada fare imlecini değiştirecekseniz Body etiketinde tanımlayınız.

ÖRNEK:

body {
    cursor: url("custom.jpeg", auto);
     }