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.



Şimdi bikaç radio butona sahip, standart bir form oluşturalım:
<h3>Which one do you prefer?</h3>
<ul>
    <li>
		<label for="radio1">
			<input type="radio" id="radio1" name="my_options" class="tick_or_x" checked="checked" />
			<span>Strawberry Mojito</span>
		</label>
	</li>
    <li>
		<label for="radio2">
			<input type="radio" id="radio2" name="my_options" class="tick_or_x" />
			<span>Pina Colada</span>
		</label>
	</li>
    <li>
		<label for="radio3">
			<input type="radio" id="radio3" name="my_options" class="tick_or_x" />
			<span>Mint Liquor</span>
		</label>
	</li>
</ul>
Kod oldukça açık, basit bir liste içinde label elementlerinin içinde radio inputlar ve span ile çevrelenmiş açıklama metinleri içeriyor. Gayet standard bir css ile bu görüntüyü yukarıdaki görselde solda olan temiz bir şekle sokalim:
body {
	padding: 10px 30px;
	font: 18px Helvetica;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
HTML kodunda farkettiğiniz gibi tüm radio elementleri tick_or_x sınıfıyla tanımlanmışlar, şimdi bu sınıfı hazırlayacağız.

Aslında yaptığımız işlem radio elementini gizleyip onun yerine x veya tık işareti koymak. Yerine yerleştirdiğimiz elementi css ile oluşturacağız. Bunun için bir css özelliği olan ":before" pesudo elementi ile html kodunda gördüğünüz span elementlerini kullanacağız. Onun için input elementlerini hemen gizleyebiliriz (veya görünür bir şekilde bırakıp gerçekten görsel değişiklikleri form elementleri üstünde uygulanıp uygulanmadığını görebilirsiniz).

Şimdi list elementlerin içinde sadece span'ler var, bunu da input elementini belirlediğimiz sınıf adını "+" operatörüyle kullanarak seçtirebiliriz, yani ".tick_or_x + span" css seçicisi tick_or_x sınıflı elementin hemen ardından gelen span'leri seçmemizi sağlayacaktır.

Aşağıda tick_or_x sınıfına ait kodu veriyorum, hemen ardından açıklamaya çalışacağım:
.tick_or_x {
	display: none;
}

.tick_or_x + span {
	display: inline-block;
	position: relative;
	padding-left: 40px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 15px;
}

.tick_or_x + span:before {
	content: '✗';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: silver;
	width: 30px;
	margin-right: 10px;
	text-align: center;
	border-radius: 15px;
}

.tick_or_x:checked + span:before {
	content: '✔';
	background: green;
	color: white;
}
".tick_or_x + span" seçicisiyle seçtiğimiz elementleri block level elementlere çevirelim, sonrasında ".tick_or_x + span:before" seçicisiyle span elementimizin önüne bir element oluşturacağız. Bu kısım biraz kafa karıştırıcı gelebilir, css before ve after pesudo elementleri hakkında daha önce yazdığım "CSS before ve after sözde elementleri" yazısını inceleyebilirsiniz.

".tick_or_x + span:before" ile seçtiğimiz sözde elementi bir block level elemente çeviriyoruz ve position absolute ile havada asılı hale getirelim (floating element). Bu elementin ailesi (parent) olan ".tick_or_x + span" elementi daha önce block level ve relative duruma getirilip bulunduğu noktada asılı hale getirilmişti. Şimdi before sözde elementini istediğimiz noktaya pozisyonlayabiliriz. Bu sözde element ile görsel olarak, tick veya x işaretini oluşturacağız. Bir radio butonun doğal durumunun seçili olmadığı (unchecked) durumu olduğunu düşünürsek bu sözde elementin doğal görünümü "X" işaretçisi olacaktır. Bunu bir imajla da tasarlayıp tamamen özelleştirebilirsiniz. Ben basit bir örnekleme ile ascii karakterlerini doğrudan css içine yazdım, aslında bunu yapmamak gerek, çünkü IE gibi tarayıcılarda bu karakterler çalışmayacaktır.

Elementimizi radio butonlarımızın bulunduğu konuma gelecek şekilde (örnekte solda etiketin yanında) pozisyonladıktan sonra seçim durumunu yakalamaya çalışacağız. Burada bir css3 seçicisi olan ":checked" seçicisini kullanacağız. Bu seçici sadece seçilmiş checkbox, radio gibi elementleri işaret eder. Seçili olan radio butonumuzu bu şekilde yakalayabiliriz. Görsel olarak ilgili elementleri yakalamak için bu seçici ile "+" operatörünü beraber kullanıyoruz ve ".tick_or_x:checked + span" seçicisi bize seçili olan radio butona ait etiket span'ini yakalamamızı sağlıyor. Bu elemente ait before sözde elementi de seçili olan elementin görsel olarak yerleştirdiğimiz işaretçisini adresleyecektir.

Doğal olarak seçimi ifade eden check ascii işareti ve bir artalan rengi farklılığı ile görsel olarak seçimi gösterebiliyorum. Bunun yerine bir imaj tasarlayarak istediğiniz şekilde özelleştirebilirsiniz.

Ben başta gizlediğimiz radio input elementini bu noktaya kadar görünür halde tutup, hazırladığım kodun, yaptığım tıklamaları doğru yakalayıp yakalamadığını form elementi üstünde görecek şekilde geliştiriyorum. Bu noktada input'lari css'den gizliyoruz ve kodumuz hazır duruma geliyor. Şimdi aşağıdaki butonla çalışan örneğin inceleyin.


Çalışan Örnek Kod


Nihai kodu da çalışan demo'dan inceleyebilirsiniz.
4 Şubat Cuma ´11   —   2 Yorum

Less

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/

Popüler Etiketler

php object javascript js css3 css html cms wireless internet mfyz firefox download mysql google social media service sosyal medya istatistik statistics graph cache htaccess apache ui ux login webkit form logo html5 cookie subdomain optimization job developer jquery framework plugin workspace mobile table iphone facebook share meta windows linux fstab ntfs wanda digital newsletter mail kurulum sql export tool macosx app gimp howto nasıl language session api opengraph fql date diff zaman route router mod_rewrite örnek kod spam xmlhttprequest ajax pear mdb2 prepare execute mssql pgsql iOS pharma hack wordpress seo proje kampanya konsol terminal startups mootools music search twitter design radio style link optimizasyon while db database free apple osx player integration network blog kontrol yapıları if switch sitemap rss xml nedir textarea ipad query injection icons xhtml url ios app store store in-app purchase purchase verification storekit itunes connect itunes server box web app open source icon ikon grafik banner calendar ipucu ubuntu bootstrap license lisans widget ruffles doritos ide editor phpstorm jetbrains deployment version control svn git less portfolio generator regex development auth http tarih browsers support www redirect crossdomain ie browser connect compile compiler on-the-fly dokuman subscription tebrik imza signature subversion applications oyun coding insanlar code assets internet explorer input parse analyse procedure chart laptop notebook tytz lifestream screen kitap button select