SahraForumDizini

Genel Forum Sitesi
 
AnasayfaAnasayfa  AramaArama  Kayıt OlKayıt Ol  Giriş yap  
Sayfayı FaceBook'ta Paylaş

Paylaş
 

 CSS Arama Butonu Yapımı

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
Sahra

<b>Mesaj Sayısı</b> Mesaj Sayısı : 428
<b>Tecrübe</b> Tecrübe : 1091
<b>Rep Puanı</b> Rep Puanı : 29
<b>Kayıt Tarihi</b> Kayıt Tarihi : 07/07/11
<b>Yaş</b> Yaş : 27
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

CSS Arama Butonu Yapımı Empty
MesajKonu: CSS Arama Butonu Yapımı   CSS Arama Butonu Yapımı EmptySalı 19 Tem. - 13:41:11

Css ile zarif arama formları hazırlamak



CSS Arama Butonu Yapımı Zarif-arama-formuÖ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 CSS Arama Butonu Yapımı Icon_wink
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 CSS Arama Butonu Yapımı Icon_smileCSS Arama Butonu Yapımı Ss_1
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.CSS Arama Butonu Yapımı Ss_2
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 CSS Arama Butonu Yapımı Icon_wink
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 CSS Arama Butonu Yapımı Icon_smile Hazırladığımız bu arama formunun demosuna [Linkleri görebilmek için üye olun veya giriş yapın.] erişebilirsiniz.
Sayfa başına dön Aşağa gitmek
http://sahra.forumdizini.com
 
CSS Arama Butonu Yapımı
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SahraForumDizini :: Webmaster :: CSS-
Buraya geçin: