CSS Arama Butonu Yapımı

Css ile zarif arama formları hazırlamak



Özellikle
içerik bakımından daha zengin olan web sitelerinde, ziyaretçilerin
içeriğe daha kolay ulaşma yollarından birisi de arama yapmaktır. Arama
işlemini yapan arama formları ise pek çok web sitesinde özensiz bir
şekilde hazırlanmış veya biçimlendirilmemiş oluyor. Oysaki birazcık CSS ve resim desteğiyle çok şık arama formları yapabiliriz
1. Arama formunun hazırlanması


ilk önce klasik bir arama formu oluşturalım. Bu arama formu için 4 adet HTML etiketi kullanacağız. Bunlar div, form, input ve button etiketleri… Burada önemli olan, arama formunu oluşturan bütün nesneleri div etiketi içerisine almak. Sonuç olarak arama formunu alttaki kodlar yardımıyla oluşturuyoruz




===================HTML KODLAR================

Kod:

 <div id="aramaFormu">    <form action="" method="get">        <input type="text" name="aranan" />        <button type="submit">Ara</button>    </form> </div> 

Böylece “en sade” haliyle klasik bir
arama formu oluşturmuş oluyoruz. Bu kodların ekran görüntüsü alttaki
gibi olacaktır. Fazla bir albenisi yok değil mi
Klasik bir arama formu

2. Arama formu için görsellerin hazırlanması



Arama formunu biçimlendirmeden önce 2
adet “görsel” hazırlamamız gerekmektedir. Hazırlanan bu görsellerin
birincisi arama formumuzun arka planını, ikincisi ise arama butonumuzun
arka planını oluşturacak. Alttaki şemada bu iki görseli ve bu iki
görsel kullanılarak hazırlanmış arama formunun son halini
görebilirsiniz. şemadaki “pembe” bölümü ise, arama kutusunun
yerleştirileceği alanı işaretlemek için kullandım. Arama formumuzun son
halinde bu pembe alanın yerini arama kutusu yer alacak.
Arama formunun şeması


Yukarıdaki şemada dikkatinizi çekmek
istediğim asıl nokta, görsellerin genişlik (W) ve yükseklik (H)
değerleridir. Çünkü bu değerleri, CSS kodlarımız içerisinde
kullanacağız. CSS kodlarından bahsetmişken artık CSS kodlamaya
geçebiliriz
3. Arama formu için CSS kodlarının hazırlanması



Yukarıda yazmış olduğumuz kodlara tekrar baktığımızda, div etiketinin ID özniteliğine “aramaFormu”
ismini verdiğimizi görüyoruz. Çünkü bütün CSS biçimlendirmesini bu
ismi referans alarak yapmamız gerekiyor. Öncelikle bu biçimlendirmeyi
yapan CSS kodlarına bakalım; kodların incelemesini daha sonra yaparız
(:
==================CSS KODLAR====================

Kod:

 <style type="text/css">    /* = 1. bölüm    ------------------------------------------------- */    #aramaFormu {        width: 210px;        height: 39px;        overflow: hidden;        background: #fff url(arkaForm.png) no-repeat    }      /* = 2. bölüm    ------------------------------------------------- */    #aramaFormu input {        width: 148px;        height: 21px;        padding: 0;        margin: 8px 0 0 8px;        float: left;        border: none;        background: #fff;        font: normal 13px Verdana    }      /* = 3. bölüm    ------------------------------------------------- */    #aramaFormu button {        width: 40px;        height: 29px;        margin: 3px 9px 0 0;        float: right;        text-indent: -9999px;        border: none;        background: #fff url(arkaButon.png) no-repeat;        cursor: pointer    } </style> 

1. bölümde arama formundaki bütün nesneleri kapsayan div
etikeni biçimlendirdik. Genişlik ve yükseklik değerlerini girip,
hazırladığımız görseli arkaplan olarak atadık. Taşma problemi olmasın
diye de overflow:hidden kodunu kullandık.

2. bölümde arama sözcüğünün yazıldığı kutuyu biçimlendirdik. Genişlik ve yükseklik değerlerini girip, margin ile kenarlardan uzaklıklarını belirledik. Ayrıca float:left ile sola yaslanmasını sağladık. Arkaplan rengini beyaz olarak atadıktan sonra, border
ile kenar çizgilerinin görünmemesini belirttik. Son satırda ise kutu
içerisine yazılacak yazının tipini ve büyüklüğünü ayarladık.

3. bölümde formun
gönderilmesini sağlayan butonu biçimlendirdik. Yine genişlik ve
yükseklik değerlerini girdik, kenar uzaklıklarını belirledik. Daha
sonra float:right ile sağa yaslanmasını sağladık. Buton üzerindeki “Ara” yazısını göstermemek amacıyla text-indent:-9999px kodunu kullandık. Ayrıca kenar çizgilerinin görünmemesini ve hazırladığımız görselin arkaplan olarak atanmasını sağladık. cursor:pointer kodunu ise, imleç butonun üzerine getirildiği zaman imlecin “el işareti” olarak görünmesi için ekledik.
Sonuç…



CSS’nin nimetlerinden faydalanarak
kolayca zarif nesneler hazırlanabildiğini gördük. Benim tasarım bilgim
zayıf olduğundan dolayı, siz görselleri daha güzel hazırlayıp bu örneği
daha iyi bir hale getirebilirsiniz Hazırladığımız bu arama formunun demosuna [Linkleri görebilmek için üye olun veya giriş yapın.] erişebilirsiniz.