This is Time for CSS3

Artikel kali ini akan membuat skill sobat lebih naik lagi levelnya. Karena sekarang sudah marak CSS3 mau tidak mau kita harus sesegera mungkin melatih, minimal tahu atribut dari CSS3. Beben berkata demikian karena setelah menengok ke salah satu sobat blogger, dia sedang getol-getolnya bereksperimen CSS3 dipadukan dengan javascript onclick Event. Setelah melihat hasilnya, e bo bo e..amboy indah ditengok ma mata. Sebelum masuk ke inti persoalan Beben Koben si bloglang anu ganteng kalem tea akan memberikan contoh sederhana dari atribut CSS.

Button with Gradient

<style>
.buttonStarted {
width: 120px;
color: #FFFFFF;
font-size: 23px;
margin: 5px;
padding: 5px 15px 5px 15px;
text-align: center;
border: 1px solid #FF6600;
background-color: #FF8432;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: Arial,Helvetica,sans-serif;
background-image: -moz-linear-gradient(bottom, #ff6600 5%, #F1F1F1);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.15, #ff6600), color-stop(0.19, #F1F1F1));
clear: both;
}
</style>

<div class="buttonStarted">Get started</div>

Result:

Get started

Teringat kala mau masuk ke dashboard blogger, saat melakukan login itu si button :-/

Button on Dashboard

<style>
.buttonDashboard {
width: 70px;
text-align: center;
background: #69F;
padding: 2px 9px;
font-weight: normal;
font-size: 90%;
border: 1px solid #039;
text-transform: uppercase;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.buttonDashboard a {
color: #fff;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}
.buttonDashboard a:active {
color:#fff;
cursor: pointer;
font-size: 89%;
text-decoration: none;
}
</style>

<div class="buttonDashboard"><a href="#" title="" target="_blank" />New Post</a></div>

Result:

New Post

Mudah kok asalkan kita mau rajin membaca directory & praktek ;) How about this!!! This is what i mean broo :x

1x | 2x | 3x

You can say about this, please hover that menu with your mouse!

• Blogspot
• item-1
• item-2
• item-3
• item-4
• item-5

How about it too!!!

1234567

Please visit the great blog Vagabundia and acak-acak artikelnya :-bd Here's for quick link's for above the tut's +1 bonus:

• El tamaño de las cosas
• Menús y transiciones
• Transiciones, sliders y slideshows
• TinyDropdown: Un script para crear menús

This is time for CSS3 \m/