Kamis, 02 Februari 2012

Artikel-artikel Keren Gaya Full Stylish

Artikel sekarang merupakan hasil Koben pilih dari walking² blog & web. Article mantap guna belajar lebih dalam bahasa HTML ;) Langsung saja pada postingan pertama jatuh pada membuat tabs dengan jQuery, hasil karya @catalinred ini, diberi sedikit bumbu sentuhan CSS3 CSS3 & jQuery folder tabs. Artikel kedua merupakan updatean postingan gue dulu tentang CSS3 Image Styles Sesuatu Banget, sekarang sudah ada fresh posted CSS3 Image Styles Part 2 by @nickla
Lanjut bos mari, opsi kita bermain Fun Fun Deh lihat ada permainan membuat efek marquee, dan sekarang kita dapat membuat marquee and blink² efek dengan memakai atribut CSS 3, cek gi dot Alternatives to <Marquee> and <Blink> tags. Teman kita membuat satu form action guna menggenerat emoticon teranyar buat chattingan bagi facebooker CODE Facebook Chat Text Emo Generator :-bd Generator yg akan menghasilkan deretan huruf menjadi emotikon di chatingan facebook dengan beragam warna ciamik punya. Coba saja lah buka facebooknya ;)) baru bisa praktek :P

Sobat blogger yg di templatenya pakai Related Post bergaya LinkWithin, sekarang dapat menseting alias customize widget tersebut, hajar bleh Personalizar el gadget de LinkWithin. Koben akhiri petualangan blog walking ini dengan bagaimana membuat tabel dengan atribut CSS3 dengan efek hover cantik :x karya Ajay Patel.

Click to My Demo(gunakan HTML Editor buat lihat hasil karya aku)
<div class="pricing_table"><ul><li>Main Blog</li><li>Beben-Koben</li><li>Perfect place for looking the great tutorials blog.</li><li>861 Posts</li><li>Unlimited Storage</li><li>Powered by Google</li><li>Good Security</li><li></li><li><a href="http://beben-koben.blogspot.com/" title="tutorial blog for stylish blogger" target="top">Enter Now</a></li></ul><ul><li>Blog Tools</li><li>Ben-Tools</li><li>Perfect place for looking tools para blog/web..</li><li>335 Posts</li><li>Unlimited Storage</li><li>Powered by Google</li><li>Good Security</li><li></li><li><a href="http://ben-tools.blogspot.com/" title="ben tools" target="top">Enter Now</a></li></ul><ul><li>Dummies Blog</li><li>Embah-Google</li><li>Perfect place writed example by my technique.</li><li>78 Posts</li><li>Unlimited Storage</li><li>Powered by Google</li><li>Good Security</li><li></li><li><a href="http://embah-google.blogspot.com/" title="embah google" target="top">Enter Now</a></li></ul></div>
<style>
.pricing_table{border:1px solid #c4cbcc;margin-top:10px;float: left}.pricing_table ul{list-style:none;float: left;width:140px;margin:0;border:1px solid #f2f3f3;padding:5px;text-align:center;background-color:transparent;-o-transition:.5s ease-in;-moz-transition:.5s ease-in;-webkit-transition:.5s ease-in}.pricing_table ul:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);-webkit-box-shadow:3px 5px 7px rgba(0,0,0,.7);box-shadow:3px 5px 7px rgba(0,0,0,.7);background:#d8e9f9;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;-webkit-transition:.3s ease-out}.pricing_table ul li{border-bottom:1px dashed #fff;padding:10px 0}.pricing_table ul li:first-child{color:#fff;font-size:18px;font-weight:bold;background:#225D68}.pricing_table ul li:nth-child(2){background:#2E808E;color:#fff;font-weight:bold}.pricing_table ul li:nth-child(3){font-size:13px}.pricing_table ul li:nth-child(n+4){font-size:14px}.pricing_table ul li:last-child a{color:#F0F0F0;font-weight:bold;display:block;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #c4cbcc;padding:10px;margin:5px 0;background:#0061bb}</style>

This is original article Free CSS3 Pricing Table HTML5 CSS3 Pricing Table :)

Tidak ada komentar:

Posting Komentar