Css ile Arama Kutusu Tasarımı

 bcakir
 20 Kasım 2011
 Css

Merhaba arkadaşlar bu yazımda Css ile arama kutularına nasıl tasarım verileceğini anlatan bir uygulama yapacağım. Daha önceki yazımda Php ile kategoriye göre aramayı anlatmıştım. Bu iki uygulamayı birleştirerek, hem arama işlemini hem de arama kutularına tasarımlar giydirmeyi yapabilirsiniz. Kendi çizdiğiniz arama formu ve butonları kullanabileceğiniz gibi internetten bedava arama kutusu icon setleri de indirebilirsiniz. Bu uygulama ile arama kutularına tasarım giydirmeyi öğrenmiş olacağız. İyi ve farklı tasarımlar oluşturmak sizin yaratıcılık yeteneğinize bağlı. Bu uygulamanın bütün dosyalarını yazının sonunda size vereceğim. Uygulamamızın genel içeriği bu şekilde olacak, artık geliştirmeye başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>Css ile Arama Kutusu Tasarımı</title>
<style type="text/css">
#aramaKutusu{
    width: 238px;
    height: 34px;
    overflow: hidden;
    background: url(arama_kutusu.png) no-repeat
}

#aramaKutusu input{
    width: 193px;
    height: 19px;
    margin: 7px 0 0 7px;
    padding: 0;
    float: left;
    border: none;
    background: #eee;
    font: normal 12px Arial
}

#aramaKutusu button{
    width: 25px;
    height: 25px;
    margin: 4px 9px 0 2px;
    float: right;
    text-indent: -9999px;
    border: none;
    background: url(btn.png) no-repeat;
    cursor: pointer
}
</style>
</head>
<body>
<div id="aramaKutusu"><form>
<input type="text" name="aranan" placeholder="Aranacak Kelime..." />
<button type="submit" name="ara">Ara</button>
</form></div>
</body>
</html>

Yukarıda arama kutumuzun boyutlarını belirledik ve arka alan olarak resmimizi yükledik. İçerisindeki yazı yerinin boyutlarını belirleyip, butonumuzu koyduk ve daha sonra da, bu buton için yaptığımız tasarımı giydirdik. Siz sadece uygulamanın boyutları ve resimleriyle oynayarak farklı tasarım oluşturabilir ve bütün içeriğin olduğu dosyayı buradan indirebilirsiniz. Böylece uygulamamız da bitmiş oldu, görüşmek dileğiyle.

 3.701 Okunma

Bu yazıya 4 yorum yapılmış.

  1. Teşekkür ederim Çakır Bey 🙂

  2. Çok sağol hocam tam da istediğim arama kutusu. Emeğine sağlık.

  3. Button nerde? Kodları baya inceledim button var ama gömülü.

  4. Teşekkür ederim, güzel olmuş.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css
Kapat