Sihirli Fasulyeler
Yükleniyor...
CSS ile İmleci Değiştirmek
 Web-Tasarım   1420   21.10.2017   0
css-cursor.jpg

Bildiğiniz gibi CSS, bir web sayfasındaki bütün görsel düzenlemeleri yapan bir web tasarım teknolojisidir. İmleç özelliği de bu görsel düzenlemelerin içinde yer alır. Yani CSS kullanarak çok kolay bir şekilde imleçleri değiştirebilir, kendi oluşturduğunuz veya internetten bulduğunuz resim dosyalarını da imleç olarak kullanabilirsiniz. Bunun yanında tanımladığınız bir imleci bütün sayfa için kullanabilir veya sayfanızda bulunan elemanlar için ayrı ayrı imleçler oluşturabilirsiniz.

 

Çok kısa olarak şunu da söylemek isterim ki imleçlerin asıl görevi sayfanızı ziyaret eden kullanıcıları yönlendirmektir. Örneğin bir linkin veya bir yazı alanının üzerine gelindiğinde imleç değişir ve kullanıcıya bu elemanları nasıl kullanıcağını gösterir. Küçük ama etkili bir yöntem!

 

CSS'de temel olarak 32 adet imleç işareti bulunur. Duruma göre istediğiniz kullanabilirsiniz. Öncelikle imleç tanımlaması CSS'deki cursor komutu ile yapılır.

 
hedef { cursor : imleç kodu;}
 

Aşağıdaki uygulamada hangi imleç için hangi imleç kodu kullanılmalıdır sorusunun cevabını bulabilirsiniz.

 
auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize
 

Bazı örnekler

body { cursor : pointer; /*Sayfa imlecini el işareti yapar */ }
#button1 { cursor : not-allowed;  /* button1 kimliğinin imlecini yasak işareti yapar */}
.link2 { cursor : help;  /* link2 sınıfının imlecini soru işaretli hale getirir */}
 

Aşağıdaki CSS kodu, kendi oluşturduğumuz veya internetten bulduğumuz resim dosyasını imleç olarak atar. Resmin formatı, arka plan şeffaflığını destekleyen bir format olmalıdır (png gibi) . Örneğin bir resmi bütün sayfa için imleç olarak atamak isterseniz,

 
body { cursor : url( resim-yolu/resim.png ),auto;}
 

komutunu kullanabilirsiniz. Benzer şekilde aşağıdaki gri alan imleci için bir resim atanmıştır. Fare ile alana gelirseniz imlecin değiştiğini görebilirsiniz.

 

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap