Masih dari Zeitgeist Google bila kalian perhatikan pada sisi kanan bawah terdapat garis
Ketika kalian sorot akan muncul satu robot unyu-unyu yg mana tangan dan kakinya bisa bergerak-gerak! Bagaimana hal itu bisa terjadi, temukan jawabannya di Google Zeitgeist Gangnam Style Easter Egg by master Layke. Sobat pernah melihat ini Google BBS Terminal aplikasi kreasi dari <masswerk.at> dan ini aplikasi serupa yg teranyar-nyah Google60
CSS3 generator lumayan baru dengan sentuhan gaya jQuery scrollorama bisa kalian jadiin alternatif tools yg udah ada www.css3generator.in Now let's go melancong to web code demo & view, and it's talking about Search box
tutorial
- codepen.io/joshnh/pen/eIksb
- codepen.io/arthurra/pen/KhCyk
- cssdeck.com/labs/full/super-cool-search-input-using-css3-and-js/0
Here demo Focused Input Trick.
#searchs {
background: #fc6;
border: .125em solid #222;
cursor: pointer;
display: inline-block;
font-weight: bold;
height: 2em;
line-height: 2em;
padding: 0 1em;
text-transform: uppercase;
vertical-align: top;
}
#searchs:hover,
#searchs:focus {
background-color: #fa3;
}
#search {
border: .1575em solid #222;
border-right: 0;
color: #222;
display: inline-block;
font: 1em/1.5 sans-serif;
height: 2.2789em;
margin-right: -.25em;
opacity: 0;
-webkit-transition:.25s;
-moz-transition:.25s;
-o-transition:.25s;
transition:.25s;
width: 0;
}
#search:focus {
opacity: 1;
padding-left: .75em;
padding-right: .75em;
width: 18em;
}
Lakukan seting pada width & height sesuai keperluan.MARKUP HTML
<form action="http://www.google.com/search" method="get" target="_blank">
<input id="search" type="text" name="as_q" value="Cari apa..."/>
<input name="sitesearch" type="hidden" value="YOUR-BLOG .blogspot.com" />
<label for="search" id="searchs">Search</label>
</form>
Who's cooler ;))
nicolasgallagher | paulund.co.uk | CSS drop-shadows without images | CSS Box Shadow Effects |
---|
Happy coding \m/
Tidak ada komentar:
Posting Komentar