Cara Membuat Animated Search Form dengan CSS
Orang yang beneran cinta sama kita, nembak bilang “i love u”-nya nggak sendirian. Dia datang serombongan, bareng keluarga besar. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Merancang Animated Search Form dengan CSS.
Sekiranya ingin mencari form search tapi yang ingin ada animasi nya. Nah disini saya akan memberitahukan Cara Merancang Animated Search Form dengan CSS. Berikut caranya:
Seperti biasanya, terlebih dahulu siapkan file index.html nya.
Kemudian isi di bagian <body> tag-tag HTML seperti berikut.
<p>Animated search form:</p>
<form>
<input type=text name=search placeholder=Search..>
</form>
Setelah itu, isi di bagian CSS.
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}Bagaimana teman-teman? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Merancang Animated Search Form dengan CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
