Good Resource in August 2013

Koben akan mencoba berbagi issue terhangat yang sedang terjadi di dunia maya ini. Tentunya hal-hal yg ada sangkut pautnya dengan kegiatan kita ber-blogging ria in the house! Banyak sih, tapi siapa tahu versi gue bisa bermanfaat buat kalian :) Resource berguna lagi informatif ini diawali dengan front-end framework untuk pengembangan web (blog too) agat lebih cepat dan lebih mudah Bootstrap Dengan memakai bootstrap versi teranyar v3.0.0 kita akan lebih mudah dalam pengkodean CSS (bisa customize and langsung download juga loh) ;)
Ternyata dengan pemakaian bootstrap, sedikit memusingkan kita dalam mengelola & mengekstrak id, kelas dan gaya inline dari dokumen HTML! Tenang saja kawan-kawanku ada tools mantap nih untuk solusinya extractCSS

extractCSS sudah opensource, file dapat di download di web github, tp pas di download tidak jalan, bagi yg mau tools tsb silahkan kontak gue yah :P Kita mungkin baru tau resposive bekerja pada bagian CSS dan HTML saja, akan tetapi ternyata urusan responsive juga bisa diterapkan pada masalah typography juga FlowType.JS Masuk ke masalah membuat tombol? Master Taufik Nurrohman sudah pernah membuat tools portable css3 button generator Tidak ada yg salah dengan tools itu, tapi saat sekarang cobalah yg ini Create CSS-only Buttons Berbicara mengenai tools tidak ada habisnya, oleh sebab itu kita musti mengetahui rahasia di balik itu semua secrets
Framekworks & tools memang seperti sudah menjadi satu-kesatuan yg tidak terpisahkan, oelh sebab itu dalam memilah-memilih malah di buat pusing sendiri! You must see it for that trouble divine project

Saat sobat sedang bereksplore web wireframe tools, maka kalian akan dihadapkan dengan tampilan jejeran web-web keren punya dengan trick image hover effect full stylish :-?
DEMO

Tutorial Blog for Stylish Blogger

by b3b3n

Twitter

.image-container p {
 margin: 0;
}
.image-container h4 {
 color: #fff;
 margin: 0;
 padding: 0;
}
.button {
 background: #0084b4;
 border-radius: 5px;
 color: #fff;
 display: inline-block;
 font-weight: bold;
 padding: 5px 8px;
 position: absolute;
 right: 20px;
 top: 30px;
}
.button:hover {
 background: #2D76B9;
 color: #fff;
}
.image-container {
 border: 6px solid #fff;
 border-radius: 4px 4px 0 0;
 box-shadow: 0 0 5px rgba(0, 0, 0, .3);
 overflow: hidden;
 position: relative;
 width: 400px;
}
.image-container img {
 -webkit-transition: all .4s;
 -ms-transition: all .4s;
 -o-transition: all .4s;
 transition: all .4s;
}
.image-container:hover img {
 -webkit-transform: translateY(-45px);
 -ms-transform: translateY(-45px);
 -o-transform: translateY(-45px);
 transform: translateY(-45px);
}
.image-container:hover div {
 opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 -o-transform: translateY(0);
 transform: translateY(0);
 -webkit-transition: -webkit-transform .4s, opacity .1s;
 -ms-transition: -ms-transform .4s, opacity .1s;
 -o-transition: -o-transform .4s, opacity .1s;
 transition: transform .4s, opacity .1s;
}
.image-container div {
 background: #34495e;
 bottom: 0;
 color: #fff;
 height: 50px;
 left: 0;
 opacity: 0;
 padding: 20px;
 position: absolute;
 -webkit-transform: translateY(100%);
 -ms-transform: translateY(100%);
 -o-transform: translateY(100%);
 transform: translateY(100%);
 -webkit-transition: -webkit-transform .4s, opacity .1s .3s;
 -ms-transition: -ms-transform .4s, opacity .1s .3s;
 -o-transition: -o-transform .4s, opacity .1s .3s;
 transition: transform .4s, opacity .1s .3s;
 width: 360px;
}

Perhatikan variable width dalam mengedit, karena sangat berpengaruh ;)
Planning HTML<div class="image-container">
<img src="LINK-IMAGE" alt="" style="" />
<div>
<h4>App Calendar Icon</h4>
<p>by <a href="YOUR-LINK" title="">TITLE</a></p>
<a href="YOUR-LINK" class="button" title="">TITLE</a>
</div>
</div>Credit code Koben dapatkan dari cssdeck.com/labs/jjcnv7p3 Dan disana penggunaan planning HTML sudah memakai bahasa HTML5, kalo gue mah xHTML saja ;)) Informasi dan tutorial sudah gue kasih tuh, kurang baik bagaimana saya coba :P Info terakhir yaitu tools untuk membuat CSS 3D menjadi lebih mudah Tridiv (use chrome or safari instead) :( Hampir saja kelupaan nih sob urusan tentang jQuery jQAPI Semoga bermanfaat :)
Happy blogging \m/