Prodigy of Head | Snippet Code CSS input type

Link to Tutorial Blog for Stylish Blogger

Posted: 18 Feb 2014 08:38 PM PST

Seiring dikembangkannya bahasa HTML dan CSS, sejalan dengan itu terlahir ide-ide penulisan snippet kode CSS. Satu artikel post yang bisa sobat pelajari tentang useful css snippets every designer should have www.hongkiat.com/blog/css-snippets-for-designers Kesempatan sekarang AA Koben akan berbagi snippet tag input Lumayan banyak attribute and value yg dapat dirangkaikan dengan tagging <input> Tag <input> menentukan field input dimana pengguna dapat memasukkan data. Sebuah field input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

Attribute	Value	Description
type	button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week	Menentukan jenis elemen <input> untuk menampilkan.

Mari fokus kepada 2 jenis tipe input, yakni input[type="text"] & input[type="submit"]
Gue menemukan form action keren punya by master Hugo Darby-Brown cdpn.io/oBDaj Bentuk kotak pencarian yang menyembunyikan tombol search, tombol akan muncul ketika focus (mengetikan kata dalam kotak pencarian)

DEMO

Keren kan!!!

.formCus {
position: relative;
height: 3em;
margin: 0 auto;
width: 25em;
overflow: hidden;
}
.formCus input {
border: none;
height: 100%;
}
.formCus input:focus {
outline: none;
}
.formCus input[type="text"] {
padding: 0 0 0 1em;
width: 100%;
color: #777;
font-size: 19px;
}
.formCus input[type="submit"] {
background: #5096f3;
position: absolute;
right: 0;
top: 0;
width: 5em;
color: #fff;
cursor: pointer;
}
.formCus .input2:focus {
padding: 0 1em;
}
.formCus .input2:focus + .input2 {
right: 0;
}
.formCus .input2[type="submit"] {
right: -5em;
transition: 0.5s;
}
.formCus .input2[type="submit"]:focus {
right: 0;
}

Markup HTML

<form action="" class="formCus" method="get" target="top">
<input class="input2" type="text" name="q" placeholder="Search something..."/>
<input class="input2" type="submit" value="Search"/>
</form>

Itu baru area tombol yg menjadi fullstylish, belum lagi area input labels with clean animated b-) Label dengan efek animasi lembut yg lagi ngetrend dimana-mana. Jika kalian tertarik, silahkan pelajari codepen.io/oknoblich/pen/wFGIH The source
BONUS: cdpn.io/zcwbD - cdpn.io/dLIjt

Happy input \m/

Prodigy of Head | Snippet Code CSS input type

Prodigy of Head | Snippet Code CSS input type

Next

Newer Post

Previous

Older Post