Sabtu, 01 Desember 2012

Trick CSS3 & jQuery Rainbow Plugin

Ternyata web Design Shack selalu penuh kejutan. Koben akan share 2 tutorial dari sana. Pertama yaitu trick membuat accordion CSS Persis dengan artikel dulu Make Accordion Using CSS3. Cuman sekarang bergaya vertical sob Build a Freaking Awesome Pure CSS Accordion
Belum juga beberapa lama sudah keluar lagi trik full stylish lainnya. Sliding image with hover mode! Itu versi saya mengartikannya :D Please take a look Swap Your Page’s Background Image on Navigation Hover DEMO. Link berikut bisa menjadi acuan belajar Teknik CSS Hack Checkbox & Radio Bagaimana membuat kayak gini sok...githubSalah satu bootstrap utilize CSS web GitHub
KODE CSS
.GitHub ul {
height: 40px;
width: 270px;
padding: 0;
margin: 10px auto;
background: #eee;
list-style: none;
border-radius: 5px;
border:1px solid #ddd;
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
}
.GitHub li {
width: 89px;
float: left;
border-right: 1px solid #ddd;
height: 40px;
}
.GitHub ul a {
line-height: 1;
font-size: 11px;
color: #999;
display: block;
text-align: center;
padding-top: 6px;
height: 40px;
}
.GitHub strong {
color: #222;
font-weight: 700;
}
.GitHub ul li + li {
width: 88px;
border-left: 1px solid #fff;
}
.GitHub ul li + li + li {
border-right: none;
width: 89px;
}
.GitHub ul a strong {
font-size: 14px;
display: block;
color: #222;
}
KODE HTML<div class="GitHub">
<ul>
<li><a href="">Download <strong>ZIP</strong></a></li>
<li><a href="">Download <strong>TAR</strong></a></li>
<li><a href="">View On <strong>Blog</strong></a></li>
</ul>
</div>
Masih ingat dengan fitur RAINBOW Rainbow pada tulisan Blogspot by Google Keren kan! Kalau efek rainbow pada link & tulisan kepengen permanen, baca ini Rainbow is Pelangi Beleketek.
Ketika disorot pd hyperlink ada blink² gimana gito, sedangkan pd tulisan warna pelangi terlihat memukau? Sekarang bagaimana jika ada efek rainbow lain dengan mode blink-blink tanpa sorot!!!
Silahkan meluncur kemari saja ya Rainbow.js jQuery Plugin
Udah ah, see you :-h
Happy blogging \m/

Tidak ada komentar:

Posting Komentar