CSS Yeni Kros Simgeleri Fare İmleçleri

CSS3.0 İle Birlikte Yeni Kros Simgeleri Eklenmiş Fakat Bunları Bazı
Tarayıcılar Desteklemeybilir Yeni Olanları Yeşil Renkli Bir Kutu İle
belirttim mevcut kullandıklarımızı renkleri gri bir renkler belirttim bu
kutuların üstüne farenizin imlecini getirerek test edebilirsiniz bu
imleçlere bakalım
Varsayılan Kros Simgeleri



(Auto) Yani otomatik kros simgesi gösterir link ise link simgesi yazı ise yazı simgesi çıkar
(Default) Yani Varsayılan Normal Fare Simgesi Yani çıkar
Kodlar:
#etiket {cursor: auto;}
#etiket {cursor: default;}
Örnekler:




Link Ve Bekletme Simgeleri



(context-menu) *YENİ CSS3 le Birlikte Gelen Yeni Bir Kros Simgesi Olan
bir Özellik Menülerde Kullanılan Bir Özellik (Şu an Tarayıcılar
Desteklemeyebilir) *YENİ
(help) Yardım Simgesi
(Pointer) Bildiğimiz Link Simgesi
(wait) Yani Bekle Ok Kros Simgesi Olmadan Komple Bekle Simgesi
(progress) Komple Bekle Simgesinin Küçüğü Olan Ok ve bekleme simgesi *YENİ
Kodlar:
#etiket {cursor: context-menu;}
#etiket {cursor: help;}
#etiket {cursor:pointer;}
#etiket {cursor: wait;}
#etiket {cursor: progress;}
Örnekler:




Seçim Kros Simgeleri



(cell) Exel Kullanan kişelere yabancı olmayan bu simge Yeni Gelmiş *YENİ
(Crosshair) Oyunlarda çokca rastladığımız + artı simgesi
(text) Yazılarımızda Gelen Alıştığımız Dikey Simge
(vertical-text) Yatayın Tam Tersi Olarak Diket yazı simgesi *YENİ
Kodlar:
#etiket {cursor: cell;}
#etiket {cursor: crosshair;}
#etiket {cursor: text;}
#etiket {cursor: vertical-text;}
Örnekler:




Taşıma ve Kopyala



(alias) Kısayol Kros Simgesi *YENİ
(copy) Kopyala kors Simgesi *YENİ
(move) Taşı Kros Simgesi
(no-drop) Taşınamaz Kors Simgesi *YENİ
(not-allowed) - (no-drop) ile aynı simgeye ait sadece isimleri farklı izin verilmeyen Kors Simgesi *YENİ
Kodlar:
#etiket {cursor: alias;}
#etiket {cursor: copy;}
#etiket {cursor: move;}
#etiket {cursor: no-drop;}
#etiket {cursor: not-allowed;}
Örnekler:




Boyutlandırma



(e-resize) Yatay Boyutlandırma 1
(n-resize) Dikey Boyutlandırma 1
(ne-resize) Çapraz Boyutlandırma 1
(nw-resize) Çapraz Boyutlandırma 1
(s-resize) Dikey Boyutlandırma 2
(se-resize) Çapraz Boyutlandırma 2
(sw-resize) Çapraz Boyutlandırma 2
(w-resize) Yatay Boyutlandırma 2
(ew-resize) Yatay Boyutlandırma 3 *YENİ
(ns-resize) Dikey Boyutlandırma 3 *YENİ
(nesw-resize) Çapraz Boyutlandırma 3 *YENİ
(nwse-resize) Çapraz Boyutlandırma 3 *YENİ
(col-resize) Yatay Sadece SOL a ve SAĞ Boyutlandırma
(row-resize) Dikey Sadece ÜST e ve ALT a Boyutlandırma
(all-scroll) SOL a SAĞ a ÜST e ve ALT a Boyutlandırma
Kodlar:
#etiket {cursor:e-resize;}
#etiket {cursor:n-resize;}
#etiket {cursor:ne-resize;}
#etiket {cursor:nw-resize;}
#etiket {cursor:s-resize;}
#etiket {cursor:se-resize;}
#etiket {cursor:sw-resize;}
#etiket {cursor:w-resize;}
#etiket {cursor:ew-resize;}
#etiket {cursor:ns-resize;}
#etiket {cursor:nesw-resize;}
#etiket {cursor:nwse-resize;}
#etiket {cursor:col-resize;}
#etiket {cursor:row-resize;}
#etiket {cursor:all-scroll;}
Örnekler:




Kros Ekleme



CSS2.1 De çoğunuz biliyorsunuzdur kros eklemeyi yinede konumuz kros olduğu için anlatalım kros eklemek için kodumuzu yazalım

P { cursor : url("mything.cur"), url("second.csr"), text; }


Yukarıdaki kodumuzda ikitane URL görüyorsunuz ilk URL tarayıcı
tarafından bulunamazsa yada bir şekilde acamaz ise ikinci URL deki
krosumuzu açmaya çalışıyor onuda aynı şekilde destelemez ve açamazsa
text olarak gösteriyor

CSS3.0 da ise durum fazla değişmiyor PNG desteği getirilmiş

p { cursor: url(hyper.cur), url(hyper.png), pointer; }