Html ve Css ile Animasyonlu Arama Kutusu Yapımı

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. 

Animasyonlu arama kutusu Html kodları

Animasyonlu arama kutusu Css kodları

Animasyonlu arama kutusunun görünümü

html-arama-kutusu-kodu-css-arama-kutusu-ornekleri

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 Loading Yapımı 

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. 

Yorum Yazın