Balakutak Lenca SeuHAH

Saatnya jalan-jalan bersama bloglang. Koben akan membawa sobat menjelajah, melihat, dan menyikat kreasi dari para sang kreator :D Jalan-jalan kali ini akan menghabiskan rokok [-X dan kopi ~O)
Di awali dari @thegaw owner by tylergaw.com memberikan beberapa project-project keren Projects that keep Tyler Gaw (scroll ke bagian bawah guna melihat artikel tentang tutorial CSS keren) Tutorial seputar tema slider coba kerenan mana menurut kalian How To Create Slide Show With Pure CSS3 atau Pure CSS3 Accordion Style Featured Post Slider (dont forget to read all article in there)
Kalau Koben sendiri menjatuhkan pilihan ttg slider effect pada tEffects jQuery plugin Trick hover dari ke empat belah sisi dalam satu kotak Multi direction hover!

From google service we are talk about Google Maps Services you can visit here gmaps.js and it's a good too Map Channels, free mapping tools Untuk meningkatkan skill kita dalam mempelajari CSS why aren't to learn:

• CSS Selectors That Rock
• 9 Valuable CSS Tricks for Responsive Design
• CSS3 Conditional Statements

Dalam urusan pembuatan tombol sobat silahkan sikat di Create Striking Button in CSS3 Using Tutorials Kepingin menjadi rapih tampilan produk-produk kalian, you can read it JavaScript libraries that make Pinterest
Perjalanan di akhiri dengan tutorial ringan seputaran dunia CSS! Membuat hover link blink-blink.

Hover it and look a blitch
Ketika di sorot akan terlihat efek CSS3 transition.

a.blitch {
color: #fff; 
text-decoration: none;
padding: 2px 10px; 
margin: 0 10px 0 0;
display: inline-block; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
background: #d00; 
border: 1px solid #333;
-moz-transition: background-color 0.2s linear 0s;
-webkit-transition: background-color 0.2s linear 0s;
}
a.blitch:hover{
color: #eee;
background: #eee;
background: -moz-linear-gradient(top,  #555,  #333);
border:1px solid #000; 
background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
}

MARKUP HTML<a href="/" class="blitch" title="">Your title here</a>

Membuat tombol like Facebook use only CSS

Like Me

#eFBe {
    border: 1px solid rgb(211, 211, 211);
    background-color: rgb(241, 241, 241);
    background-image: url("http://s-static.ak.fbcdn.net/rsrc.php/v2/y5/x/jZBV2CzYMZK.png");
    background-repeat: no-repeat;
    background-position: 7px 5px;
    padding-left: 39px;
    height: 23px;
    padding-top: 10px;
    font-size: 12px;
    font-family: verdana;
    color: rgb(85, 85, 85);
    width: 55px
}

SYNTAX HTML<div id="eFBe">
<a title="" href="YOUR-URL-HERE">TITLE HERE</a>
</div>Membuat tulisan bergaya keyboard

Beben Koben

.keyKB {
 background: #fff;
 border:1px solid gray;
 font-size:1.1em;
 margin:2px 3px;
 padding:1px 5px;
 font-family: "monospace", courier, courier new;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
}

Cara pemakaian<span class='keyKB'>TEXT HERE</span>Itu versi sederhananya, bagaimana versi HTML kbd

Beben Koben

kbd {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 12px;
padding: 1px 2px 4px 2px;
margin-bottom: 0;
vertical-align: middle;
line-height: 12px;
font-family: inherit;
display: inline-block;
color: #000;
border-radius: 3px;
clear: both;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
background: #B6B6B6;
background: #cdcdcd;
background: -moz-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cdcdcd), color-stop(30%, #e7e7e7), color-stop(100%, #e7e7e7));
background: -webkit-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -o-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: -ms-linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%);
background: linear-gradient(left, #cdcdcd 0, #e7e7e7 30%, #e7e7e7 100%)
}
kbd span {
padding: 4px 6px;
display: block;
border-radius: 2px;
background: #CCC;
background: #e7e7e7;
background: -moz-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, #e7e7e7), color-stop(70%, #e7e7e7), color-stop(100%, #cdcdcd));
background: -webkit-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -o-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: -ms-linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%);
background: linear-gradient(left, #e7e7e7 0, #e7e7e7 70%, #cdcdcd 100%)
}

Cara pemakaian<kbd><span>YOUR TEXT HERE</span></kbd>
Happy blogging \m/