CSS ile Arama Kutusu Nasıl Yapılır?

Şubat 2012
YouTube'ta Takip Et

Arama kutuları web tasarımlarında çok dikkat çekerler ve web tasarımcıların çok şık tasarımlar üretebileceği bir bölümdür. Konu web tasarım olunca da kullanıcı dostu ve göz hoş gelen arama kutuları tasarlamak gerekir.

Aşağıdaki gibi bir arama kutusunu hiçbir görsel kullanmadan, tamamen CSS3 altyapısını kullanarak hazırlayalım.

HTML Bölümü

Basitçe bir form alanı oluşturalım.

Placeholder; arama kutusundaki metindir, arama kutusuna bir metin girildiği takdirde buradaki metin kaybolacak, yazılan metin silindiğinde de buradaki metin tekrar görünür olackatır.

Required, arama kutusunun boş olamayacağını, metin olması gerektiğini vurgulayan bir uyarı çıkması içindir.

Arama Kutusunun CSS Kodları

Aşağıdaki kodları da sayfanızın CSS kodlarını düzenlediğiniz alana ekleyin.

Bu şablonu kullanarak siz de kendi sayfanızın tasarımına uygun arama kutuları oluşturabilirsiniz.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.

Kafanıza Takılan Sorular

  • Hocam bu arama kutusu tasarımı son derece mükemmel. Fakat söz konusu Internet Explorer olunca CSS’in bir anlamı kalmıyor, sizce nasıl IE 8 veya 9’a uyumlu bir tasarım yapacağız? Şahsen ben bu tasarımı kullanıyordum ama artık IE yüzünden diğer arama kutularını gözden geçiriyorum. :) Yardımcı olabilirseniz sevinirim.

  • Bu arama kutusunun IE’de düzgün çalışabilmesi için, tasarımı herhangi bir grafik editöründe hazırlayıp, imaj olarak çözümlemeniz gerekir. Tamamen CSS olarak halletmemiş olursunuz fakat IE’de çalışır hale ancak bu şekilde getirebilirsiniz.