Html Ve Css Ile Animasyonlu Arama Kutusu Yapımı | Mehsatek

Trang chủ » Html Css Arama Butonu » Html Ve Css Ile Animasyonlu Arama Kutusu Yapımı | Mehsatek

Có thể bạn quan tâ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.  

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
123 <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ı

<form> <div id="box"> <input type="text" id="search" placeholder="Ara.."> <i class="fa fa-search"></i> </div> </form>
12345678 <form><div id="box"><input type="text"id="search"placeholder="Ara.."><iclass="fa fa-search"></i></div></form>

Animasyonlu arama kutusu Css kodları

#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%; }
12345678910111213141516171819202122232425262728293031 #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:2pxsolid cornflowerblue;border-radius:4px;font-size:18px;padding:12px20px12px40px;-moz-transition:width0.4sease-in-out;-o-transition:width0.4sease-in-out;-webkit-transition:width0.4sease-in-out;transition:width0.4sease-in-out;} #search:focus {width:100%;}

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. 

Tweet Pin It

Từ khóa » Html Css Arama Butonu