Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar
Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut
<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
<input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
<label for="aspal-hellobar-switcher">
<span>⇧</span>
<span>⇩</span>
</label>
<div>
<div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div> Satu updetan beres, lanjut bro...
background: #e34c26;
}
<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.Kotak pencarian atau search box
merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}
<form action="http://YOUR-ADDRESS-BLOG .blogspot.com/search" class="search">
<div class="field">
<input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
<label for="input-search">Search here...</label>
</div>
</form> Update terakhir yg ketiga tentang markdown
Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable
Masa sekarang
