CSS3 ile Açılır Arama Kutusu

CSS3 ile Arama KutucuğuMerhaba arkadaşlar.

Bu yazımda “CSS3‘ün çoklu hover desteği ve transition özelliğiyle nasıl ilgi çekici arama kutucukları hazırlanır?” sorusunu cevaplandıracağız. Bu pratik teknik sayesinde hem göze hoş gelen bir sunum hazırlayacaksınız hem de web arayüzünüzdeki alandan kar edeceksiniz.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl hazırlanır?

Az önce belirttiğim gibi transition ve çoklu hover desteğini kullanacağız, jQuery ve türevi platformlara ihtiyacımız olmayacak. Dolayısıyla birkaç satır HTML ve CSS koduyla bütün işlemimiz tamamlanmış olacak.

İlk olarak HTML Kodları ile başlayalım.


<input id="arama" type="search">
<label for="arama">ARA</label>

Sırada ise CSS Kodları var.


label {
background-image: linear-gradient(#8b9da9, #fff6e4);
box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
border: 1px;
cursor: pointer;
display: inline-block;
font:bold 1.2em Helvetica;
margin-left: -.125em;
padding: 11px 20px 11px 20px;
transition: .25s;
color:#fff;
text-shadow:2px 2px 2px #666;
border-radius:5px;
}

input:hover +label{border-radius:0 5px 5px 0;}

input:hover + label {
background-color: #fa3;
}
input {
background-color: #e0e0e0#;
border: 1px solid #666;
color: #222;
display: inline-block;
font:1.2em Helvetica;
margin-right: -.25em;
outline: 0;
opacity: 0;
padding: 10px;
transition: .55s;
-webkit-transition: .55s;
-moz-transition: .55s;
-ms-transition: .55s;
-o-transition: .55s;
width: 0;
}
input:hover {
opacity: 1;
padding-left: .75em;
padding-right: .75em;
width: 11em;
border-radius:5px 0 0 5px;
}

Kapanış

Arama kutucuğumuz an itibariyle hazır. Yukarıdaki örneği test edebilirsiniz.

Transition üzerine çok konuştuk. Daha da konuşmaya devam edeceğiz. CSS3’ün en yeni tekniklerini sürekli incelemekteyiz. Bizi takip etmeye devam edin.

Sorularınızı yorum bölümünde belirtebilirsiniz.

İyi çalışmalar.



  • Serhat

    Merhabalar,

    Örnekteki gibi birden değilde gifteki gibi kayarak açabilmek için ne yapmamız gerekiyor tam olarak ?

    • Anladığım kadarıyla transition kodu sorun çıkardığı için aradaki geçişi görüntüleyemediniz. Browser kaynaklı bir sorun. Ben kodu yeniledim. Makaledeki CSS kodlarına tekrar bakabilirseniz sorunun çözümü mevcut.

      transition: .55s; kodunun altına

      -webkit-transition: .55s;
      -moz-transition: .55s;
      -ms-transition: .55s;
      -o-transition: .55s;

      ekleyerek tüm browserlarda çalışmasını sağlayabilirsiniz.

      • Serhat

        evet tam da bahsettiğim kod oydu 🙂 Teşekkürler geri dönüş için.

        • Rica ederim. İyi çalışmalar.

  • Sorum Şu Olacaktı Derslerin Hepsi Güzel Fakat Şu Örnek Olark Gif Koyuyorsunuz ya Onları Nasıl Yapıyorsunuz 🙂 o gifleri çözemedimde 😀

    • miGunes

      arkadaşım bence sen bu işe en baştan başlamalısın… 😉
      örneğin önce photoshop ile başlayabilirsin….

    • Teşekkürler. Programın adı GifCam.

  • koray

    Merhabalar, soru sormuştum ama gitmedi galiba, ben üst menümdeki arama kutusunu kaldırarak yer kazanmak istiyorum, lakin css stillerim sitemdeki gibi olmalı buradaki gibi görünmemeli, bunu nasıl yaparım ? Teşekkürler.

  • serche

    teşekkürler