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. 

 Ö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.  

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. 

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +