Özel imleç nedir?

Özel imleç, tarayıcının varsayılan ok veya işaretçi simgesinin yerine geçen kullanıcı tanımlı bir fare işaretçisidir. Web siteleri ve uygulamalar, markayı güçlendirmek, oyunlarda veya yaratıcı deneyimlerde sürüklenmeyi artırmak veya arayüze basitçe benzersiz bir görsel dokunuş eklemek için özel imleçler kullanır. Özel imleçler genellikle CSS'de cursor özelliği kullanılarak .cur, .png veya .svg gibi bir görüntü dosyasını işaret eden url() değeriyle tanımlanır.

Web tarayıcıları, birkaç imleç dosyası biçimini yerel olarak destekler. .cur biçimi klasik Windows imleç biçimidir, .ani animasyon desteği ekler, .png ve .svg ise tüm platformlarda çalışan modern, çözünürlükten bağımsız alternatifler sunar.

Araç açıklaması

Özel İmleç Test Aracı, herhangi bir imleç dosyasını yükleyip tarayıcıda nasıl göründüğünü ve davrandığını anında önizlemenizi sağlar. Yüklendikten sonra, imleciniz adanmış bir test alanı içinde varsayılan işaretçinin yerine geçer — bir dama tahtası görünüm alanı ve düğme — böylece tek bir CSS satırı yazmadan hem serbest alan hareketi hem de hover davranışını değerlendirebilirsiniz.

Desteklenen biçimler

Biçim Açıklama
.cur Windows imleç biçimi, yaygın olarak desteklenir
.ani Animasyonlu Windows imleç
.png Raster görüntü, yüksek kaliteli imleçler için ideal
.svg Ölçeklenebilir vektör görüntü, her boyutta keskin
.ico Windows simge biçimi, imleç olarak da kullanılabilir

Özellikler

  • Anında önizleme: İmleç, dosya yüklenir yüklenmez canlı olarak uygulanır — sayfa yeniden yüklemeye gerek yoktur
  • Etkileşimli test alanı: Dama tahtası görünüm alanı, imleçi net görünürlük için nötr bir arka plan üzerinde gösterir
  • Düğme test hedefi: Test alanı içindeki bir düğme, etkileşimli öğelerde imleç davranışını doğrulamanızı sağlar
  • Tutarlı imleç kalıtımı: Düğme, tarayıcı varsayılanına geri dönmek yerine özel imleçi devralır
  • Yalnızca istemci tarafı: Dosyalar doğrudan tarayıcıda okunur ve hiçbir zaman herhangi bir sunucuya yüklenmez

Kullanım durumları

  • İmleç tasarımcıları: Yeni oluşturulan .cur veya .png imleç dosyasının sevk edilmeden önce nasıl göründüğünü doğrulayın
  • Web geliştiricileri: İmleç varlığını CSS'de cursor: url(...) özelliğiyle entegre etmeden önce hızlı bir şekilde test edin
  • Oyun ve yaratıcı geliştiriciler: Etkileşimli UI bağlamlarında özel işaretçilerin hissiyatını ve görünürlüğünü kontrol edin

Nasıl çalışır

Bir dosya yüklediğinizde, araç tarayıcının URL.createObjectURL() API'sini kullanarak dosya için bir nesne URL'si oluşturur ve bunu test alanında CSS cursor stili olarak enjekte eder. Bu, bir stil sayfasında cursor: url(your-file.cur), auto yazmakla eşdeğerdir. Geri dönüş auto, dosya yüklenemez veya ayrıştırılamazsa tarayıcının varsayılan imleçini kullanmasını sağlar.

İpuçları

  • .png imleçleri için tarayıcı, varsayılan olarak sol üst köşeyi (0 0) etkin nokta olarak kullanır. İmlecinizin etkin noktası başka bir yerde olmalıysa (örneğin bir kalemin ucu), test ettikten sonra CSS'de bunu ayarlamanız gerekebilir.
  • Animasyonlu .ani imleçleri, bunları destekleyen tarayıcılarda (birincil olarak Chromium tabanlı) otomatik olarak oynatılır.
  • SVG imleçleri, çoğu tarayıcıda imleç olarak doğru şekilde işlenmesi için küçük olmalıdır (genellikle 128×128 px'in altında).