Radio butonları CSS ile makyajlamak

Bildiğiniz gibi bazı form elementlerine (radio butonlar, check butonlar ve birkaç diğer element) kozmetik olarak müdahale edemiyoruz veya kısıtlı şekilde müdahale edebiliyoruz. Sonuç olarak bu elementlerin görüntüsü ve çizilmesi tamamen tarayıcı kontrolünde, çoğu işletim sisteminin arabirim elementleriyle uyumlu şekilde görünecek şekilde ayarlanmış. Web arayüzünde standart elementlere dokunmamak genellikle farklı tarayıcı, farklı cihaz ve farklı işletim sistemlerinde sorunsuz çalışmasını sağlaycaktır.

Fakat bazen bir sayfayı sadece bir cihaz için veya belirli bir tarayıcıda görünecek şekilde tasarlarsınız ve bu noktada kullandığınız tüm elementlere istediğiniz tasarımı giydirmek isteyebilirsiniz. Örnegin mobil bir tarayıcıda görüntülenecek bir oyun arayüzü tasarlıyor olabilirsiniz.

Bunun için javascript çözümleri mevcut fakat birkaç css3 özelliği kullanarak sadece css ile çözebilirsiniz. Bu yazıda size radio butonları istediğiniz şekilde şekillendirmeyi anlatacağım. Radio butonları standart kullanımda, yani çoklu secenekten yapılan seçimler için bir örnek üzerinde göstereceğim.

Okumaya devam et “Radio butonları CSS ile makyajlamak”

Less CSS

LESS CSS ile çalışmak oldukça keyifli. Kesinlikle herkese öneririm. Özellikle de sürekli php veya javascript gibi dillerle çalışan programcılar bunu seveceklerdir. Çünkü CSS yazarken değişken, kontroller gibi program yapıları kullanamıyorsunuz. Eğer sistematik bir css geliştiriyorsanız, mesela gridlerle çizilen, belli bir paleti olan veya pozisyon, kenarlıklar gibi değerleriniz sürekli tekrar eden değerler ise LESS CSS kullandığınız zaman aradaki farkı çok daha iyi hissedeceksiniz.

Örnek veriyorum, CSS3 ile daha çok tekrar etmeye başladığım border-radius için aynı değeri 3 satırda giriyorsunuz, eğer aynı radius değerini mesela 4 sınıf için tanımlamanız gerekiyorsa 12 kere bu satırları tekrar etmeniz gerekiyor. Less’de sadece border radius için parametrik çalışan fonksiyon tanımlayarak her yerde bu fonksiyonu çağırabilirsiniz.

Çok basit bir şekilde tek javascript dosyasıyla çalışıyor, eğer isterseniz sunucunuzda da less dosyalarınızı derleyip javascript bagımlılığı olmadan css olarak sunabilirsiniz.

Kesinlikle denemeye değer: http://lesscss.org/