Hemen hemen her websitesinde kullanıcıların aradıkları konuyu, ürünü vb.. daha hızlı bulabilmeleri adına arama kutusu bulunuyor. Bu yazımızda arama kutusu örnekleri içerisinden animasyonlu arama kutusunun yapımını öğreneceğiz.
Tasarımlarınızda normal arama kutusunu da kullanabilirsiniz ama günümüzde artık animasyonlu ve kullanıcı etkileşimi daha yüksek tasarımlar tercih ediliyor.
Animasyonlu arama kutusunun normal arama kutusundan farkı, kutu içerisine birşeyler yazmaya başladığımızda kutunun genişliğinin artıyor olması. Kutu dışında herhangi bir yere tıkladığımızda ise tekrar eski genişliğine dönüyor.
Önemli : Tasarımımızı yaparken arama icon’u için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde örneği kendi bilgisayarınızda uygularken Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.
|
1 2 3 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> |
Animasyonlu arama kutusu Html kodları
|
1 2 3 4 5 6 7 8 |
<form> <div id="box"> <input type="text" id="search" placeholder="Ara.."> <i class="fa fa-search"></i> </div> </form> |
Animasyonlu arama kutusu Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#box { max-width: 300px; position: relative; } #box .fa-search { position: absolute; top: 14px; left: 12px; font-size: 20px; color:cornflowerblue; } #search { width: 100px; box-sizing: border-box; border: 2px solid cornflowerblue; border-radius: 4px; font-size:18px; padding: 12px 20px 12px 40px; -moz-transition: width 0.4s ease-in-out; -o-transition: width 0.4s ease-in-out; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } #search:focus { width: 100%; } |
Animasyonlu arama kutusunun görünümü
Gördüğünüz gibi işin mantığı arama kutusuna focus’landığımızda 100px olan genişliği animasyonlu olarak 0.4 saniyede 300px‘e çıkarıyoruz.
Umarım sizin için yararlı bir yazı olmuştur.
Şu yazılarda ilginizi çekebilir.
Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Css ile Özel Checkbox (Custom Checkbox) Yapımı
Css ile Özel Radio Button (Custom Radio Button) Yapımı
Yeni bir yazımda görüşmek üzere.
