styling button etiketli yazılar

Güncelleme: Buton Elementini Stillendirmek

Güncelleme: Bu yazı 10 Kasım 2010 tarihinde yazılan Buton Elementini Stillendirmek yazısının güncellemesidir. Opera’da karşılaştığım sorunlar ve fazladan “CSS hack” kullanılması nedeniyle bu güncellemeyi yapma gerekliliği hissettim. Bu yöntemde fazladan bir HTML elementi daha kullanıldı, ama hemen hemen hiç “CSS hack” bulunmuyor.

HTML Yapısı

HTML yapısı biraz değişti. Önceki yöntemde, Opera’da üzerine tıklandığında oluşan kaymanın verdiği etkiyle arkaplan resmi bölünüyordu. Bu yöntemde ise kayma yine oluyor ama arkaplan resmi bölmeden bütün olarak kayıyor.
Devamını oku »

Buton Elementini Stillendirmek

Buton elementini stillendirmek çoğu zaman sıkıntılı olmuştur. Çünkü bu element her tarayıcıda farklı farklı taranıyor. Bunu stillendirmek için birkaç yöntem var, ama her birinin kendi içinde sınırları var. Kullanılabilecek yöntemler şöyle:

  • Arkaplan görseli (background-image) kullanmak: Bu yöntemin sınırlılığı aynı stile sahip olsa da farklı boyutlardaki faklı butonlar için farklı görseller kullanmak gerektirmesidir.
  • CSS3 kullanmak: Border-radius, gradient, box-shadow gibi özellikleri kullanmak. Bu yöntem modern tarayıcılarda gayet de kullanışlıdır. Ama IE gibi hala CSS3 desteklemeyen tarayıcılar için yine de bir alternatif oluşturmayı gerektirir.
  • Buton elementinin içine görsel koymak: Border ve background‘u aynı biçimde stillendirip elementin içine <img> etiketiyle görsel koymak. Bu da bizi sınırlandırır. İstediğimiz görsel zenginliği her zaman elde edemeyiz.

Şimdi göstereceğim yöntem ile hemen hemen her tarayıcıda aynı görüntüyü elde edebilirsiniz.

Devamını oku »