◄ Min  Size Fonts: + | - | ± Color: Max ►

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:
Mudah kok asalkan kita mau rajin membaca directory & praktek ;) How about this!!! This is what i mean broo :x
lindsay-lohanBeben-Kobenkucing
1x | 2x | 3x

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


How about it too!!!

mercedes-benz-sls-amgmercedes-benz-CLS-classmercedes-benz-a-classmercedes-benz-mpvsmercedes-benz-GL-classmercedes-benz-G-class

Please visit the great blog Vagabundia and acak-acak artikelnya :-bd Here's for quick link's for above the tut's +1 bonus:This is time for CSS3 \m/
Loading...
XThis is Time for CSS3

Subscribe my posts Register For Free!

7 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE