Masuk ke EDIT HTML.

Copas kode css berikut di atas ]]></b:skin>
.note{
position:relative;
width:30%;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
background:#97C02F;
overflow:hidden;
}

.note:before{
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:#fff #fff #658E15 #658E15;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
display:block; width:0; /* Firefox 3.0 damage limitation */
}

/*
--------------------------
"rounded"
--------------------------
*/

.note.rounded{
-webkit-border-radius:5px 0 5px 5px;
-moz-border-radius:5px 0 5px 5px;
border-radius:5px 0 5px 5px;
}

.note.rounded:before{
border-width:8px;
border-color:#fff #fff transparent transparent;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius:0 0 0 5px;
border-radius:0 0 0 5px;
}
Copas kode css berikut, terserah anda ingin letakkan dimana, bisa di bawah <body> atau di HTML/Javascript.
<div class='note'>
Simple Sample Ini demo dari class="note" tanpa rounded
</div>

<div class='note rounded'>
Simple Sample Ini demo dari class="note rounded" dengan rounded
</div>
Klik Save.

Ketengan: ganti kode warna merah dengan konten atau link anda.

2 comments

21 Desember 2011 19.20

Mantabs sob,,, nice post!
CSS3 emang mantebs!

21 Desember 2011 19.35

css3 udah bxk yg kerenn

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar