CSS ile Seçili Yazının Arka Plan Rengini Değiştirme

Bugün şirketin yeni web sitesini tasarlamaya başladık. Tabiki her zamnaki gibi logo’ya uygun bir çalışma çıksın istedik. Sonra seçim alanını renklendirmek geldi aklımıza. Tam bir uyum yakalamak için. :) biliyorum biraz fazla abartmış olabilirim ama olsun denemekte fayda var diye düşündüm. Biraz araştırma sonucunda şu güzel 2 koda rastladım. Çokta kullnaışlı. Ama malesef her zaman olduğu gibi İE8 dahil eski explorer sürümleri desteklemiyor. Bunun dışında Firefox, Chrome, Safari ve Opera özelliği destekliyor. Neyse kodumuza geçelim.

Kodlama iki kısımdan oluşuyor. Birinci kısımda firefox için seçimi tanımlıyoruz, ikinci kısımda ise CSS3 ile birlikte gelen normal kodlamayı yazıyoruz.

CSS
1
2
3
::-moz-selection { background: #336699; color: #FFFFFF; }
::selection { background: #336699; color: #FFF; }

Ayrıca kodu diğer etiketlere uygulamak içinse şöyle yazıyoruz:

CSS
1
2
3
a::-moz-selection { background: #333; color: #FFFFFF; }
a::selection { background: #333; color: #FFFFFF; }

Css kodumuz bukadar. İlk kodda bütün metinlerin seçim arkaplan renklerini ve yazı renklerini belirledim. İkincisinde ise sadece linklere yani a etiketine sahip kodlara uyguladım.

Henüz fikir paylaşılmamış. Fikrini paylaşmak istersen "Birşeyler Karala" ;)

Bir Cevap Yazın