CSS Before ve After Sözde Öğelerin Kullanımı

Birçok yerde ki bunlardan birisi de benim sitemdeki ankette olan radio butonlarının şekillendirilmesinin nasıl olduğunu göreceğiz. Eskiden bu tarz düzenlemeleri yapabilmek için bıktıran usandıran kodlar ile taklalar atardık. Şimdi ise Css3 ile gelen düzenlemeler ve kullanımlarla bu şekillendirmeyi çok kolay bir biçimde hazırlamış olacağız. Şimdi bir anket oluşturup bunu nasıl şekillendireceğimizi görelim.

İlk önce basit bir anket formu oluşturuyoruz. Listelenmiş bir cevap ve bu cevaba ait bir sorunun olduğu klasik bir düzen.

<h3>Hangi Tarayıcıyı Kullanıyorsun?</h3>

<ul>

<li>
     <label for="anket1">
          <input type="radio" id="anket1" name="anket" class="x" />
          <span>İnternet Explorer</span>
     </label>
</li>

<li>
     <label for="anket2">
          <input type="radio" id="anket2" name="anket" class="x" />
          <span>Yandex</span>
     </label>
</li>
<li>
     <label for="anket3">
          <input type="radio" id="anket3" name="anket" class="x" />
          <span>Google Chrome</span>
     </label>
</li>
</ul>

Basit bir şekilde bir anket formu hazırlamış olduk. Ben ek olarak düzenlemeler yapabilmek için class atadım. Şimdi görünüm olarak li yapısından dolayı lanet listeleme şekilleri çıkacaktır ilk olarak ondan kurtulup standart bir düzenleme yapalım. Css düzenlememiş de şu şekilde olacaktır;

body {font:20px Arial}
ul, li {list-style-type: none;margin: 0;padding: 0}

Biraz abartı bir font boyutu seçsem de şekillendirmemizi halletmiş olduk. Şimdi asıl konumuza gelmek gerekirse burada nasıl bir şekillendirme yapabiliriz. Genel Aynı standartı bozmadan butonlar solda yazılar sağda olacak şekilde düzenleme yapalım.

.x {display: none}
.x + span {
    display: inline-block;
    position: relative;
    padding-left: 40px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    margin-bottom: 15px;
}
.x + span:before {
    content: 'YOK';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: silver;
    width: 30px;
    margin-right: 10px;
    text-align: center;
    border-radius: 15px;
}
.x:checked + span:before {
    content: 'OK';
    background: green;
    color: white;
}

Şöyle yaparak düzenlememizi yapmış oluyoruz. Peki, ne yaptık burada biz?

“.x + span” seçicisiyle seçtiğimiz elementleri block level elementlere çevirelim, sonrasında “.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 konusunu sitede aratarak öğrenebilirsiniz.

“.x + span:before” ile seçtiğimiz sözde elementi bir block level elemente çeviriyoruz ve position absolute ile havada asılı hale getirelim. Bu elementin ailesi (parent) olan “.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ığı 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.

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.