CSS3 ile Açılabilir Arama Kutusu Yapımı

CSS3 ile Açılabilir Arama Kutusu Yapımı

Web sitenizdeki arama kutusunu görselleştirmek veya responsive (tüm ekran çözünürlüklerine uyumlu) hale getirmek isteyenler için CSS ile çok güzel bir arama kutusu yapacağız. Öncelikle sonuç neye benzeyecek bakalım:

Örnek Demosu: Demo

Expandable Search Form

Html kodları ile başlayalım

Öncelikle Html5 ‘in nimetlerini kullanarak bir arama formu oluşturalım.Kodlarımız:

<form>
 <input type="search" placeholder="Ara">
</form>

html 5 search form

Css ile kapanıp/açılma özelliği

Başlıkta belirttiğimiz gibi menümüz kapalı bir halde duracak bastığımızda genişleyerek açılacak.Bunu yapabilmemiz için Css’deki :focus özelliğini kulllanacağız.Öncelikle focus özelliği nedir tanımlayayım.

Focus özelliği, atanan div’e tıklandığında ne yapacağını söylemek

Şimdi kodlarımızı veriyorum. Önce arama kutumuzun başlangıç değerlerini verelim.

input[type=search] {
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 font-family: helvetica; /* Yazı tipi */
 font-size: 100%; /* Font boyutu */
}

Ardından webkit tarayıcılarının verdiği başlangıç Css değerlerini (ara ve kapat butonlarını) sıfırlayalım.

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
 display: none; 
}

Arama kutumuzun başlangıç genişliğini verelim.Ben 30px olarak belirledim.

input[type=search] {
 width: 30px;
}

Tıkladığımızda genişleme özelliğini yapalım.Yukarıda belirttiğim gibi focus özelliğini kullanacağız.

input[type=search]:focus {
 width: 130px;
}

Bu kodlar ile genişliği 30px olan bir arama kutumuzu tıklayınca 130px genişliğine getirdik.Fakat görüntümüz bu şekilde hiç hoş olmadı. Css kodlarımızla biraz harmanlarsak elimize güzel bir görüntü geçecek.Şu anda elde ettiğimiz görüntü şu şekilde:

Expandable Search Form

Görünümü güzelleştirelim

İşin içine biraz heyecan katalım. Elde ettiğimiz sonuç bizim istediğimiz aç/kapa işlevini yerine getiriyor fakat görsellik yok.Aşağıda verdiğim kodlar ile bu sorunu da halletmiş olacağız. Hepsini teker teker açıklamak yerine,yanına ufak açıklamalar koydum.

Siz bunun yerine değişik şekilde Css kodlarıda yazabilirsiniz.Bu sadece bir örnek.

input[type=search] {
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 font-family: helvetica;
 font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
 display: none; 
}
input[type=search] {
 background: #ededed;   /*Arkaplan*/
 border: solid 3px #ccc;   /* Kenarlık */
 border-radius:3px;  /*köşe yumuşatma*/
 padding: 9px 10px 9px 10px;  
 width: 30px;  /*Başlangıçtaki genişlik */
 -webkit-transition: all .5s; /*Animasyon */
 -moz-transition: all .5s;/*Animasyon */
 transition: all .5s; /* Animasyon */
 } 
input[type=search]:focus { 
width: 130px; /* Tıklandığında genişlik */
background-color: #f9f9f9; /* tıklandığında arkaplan*/
border-color: #22c8e6; /*tıklandığında kenarlık rengi*/
} 
input:-moz-placeholder { 
color: #999;} 
input::-webkit-input-placeholder { color: #999; }

Sonuç:

Html5 arama kutusu

Bu dersimizde bu kadar.Bu ders sayesinde tıkladığımızda genişleyen bir arama kutusu oluşturmayı öğrendik. Yardımcı olabilmek umudu ile…

Anlamadığınız veya sormak istedikleriniz için yorum bölümünü kullanabilirsiniz.
Yazı nasıldı ama?
1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (2 votes, average: 5,00 out of 5)
Loading...
adet güzel yorum :)
  1. Merhaba. Guzel bir calisma olmus, fakat benim bir sorum var bu yapmis oldugunuz amara kutusuyla sitede gercekten arama yapilabilir mi?

Yorumlar,bizi seven insanlar!
Daha fazla Tasarım
Responsive web design
Responsive Site Nasıl Yapılır?

Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti. Web tasarımcılar şu an piyasada kullanılan tüm ekran çözünürlükleri ve boyutları...

Kapat