CSS3.0 Yeni Kros Simgeleri Fare İmleçleri (cursor)
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
(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:
(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:
(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:
(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:
(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:
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; }
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:
auto default
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:
context-menu Help pointer wait progress
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:
cell crosshair text vertical-text
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:
alias copy move no-drop not-allowed
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:
e-resize n-resize ne-resize nw-resize s-resize
se-resize sw-resize w-resize ew-resize ns-resize
nesw-resize nwse-resize col-resize row-resize all-scroll
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; }
