Membuat Bintang Dengan CSS3 "Starbursts CSS3"

Selamat sore blogger semua kayanya udah lama chugygogog tidak buat postingan. Okelah langsung saja di tengah sedikit kesibukan saya coba membuat sebuah tutorial blogger yang mudah-mudahan bisa bermanfaat. Tutorial kali ini saya akan membahas seputar CSS3 yaitu membuat Starburst atau bentuk seperti bintang dengan sudut berbentuk segitiga seperti gambar di bawah ini.
efek bintang css3 starbursts css3
Atau untuk lebih jelasnya bisa lihat demonya pada link dibawah ini.

Lihat Demo

Tehnik css3 ini saya temukan diblognya www.matthewjamestaylor.com yang merupakan blogger penganut css3 silahkan dicek saja. Oke langsung pada kodingnya saja ya.

ul.starbursts {
list-style:none;
margin:20px 0;
padding:0;
overflow:hidden;
}
ul.starbursts li {
float:left;
width:10em;
height:10em;
position:relative;
}
ul.starbursts * {
margin:0;
padding:0;
line-height:1.2em;
}
.starburst {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
}
.starburst span {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
}

Untuk mengeksekusinya gunakan kode dibawah ini.

<a href="#" class="starburst">
<span><span><span>
<br />NEW<br />CSS3<br />Starbursts!
</span></span></span>
</a>

Tehnik ini sama dengan kita membuat tombol atau button dengan menambahkan "class" pada link yang ingin di pasang. Silahkan ganti teks yang ada didalam starburst tersebut, Selamat mencoba

Komentar

Rizky2009 mengatakan…
dari lihat dmonya, aq paling suka dengan yang new css 3, maaf sob baru bisa kunjung kesini
perawatan ac mengatakan…
walahh masih belum ngerti nih gimana cara pasangnya sob... :) lihat demo nya keren juga tuhhh bisa berubah wujud pic nya.....!
Belantara Indonesia mengatakan…
PR naik...jadi lama bikin tutorial brad..hehehehhe..sekali kluar ya gini....amazing!....salutate!
Chugy mengatakan…
Belantara Indonesia :: Sebenarnya lagi buat proyek kecil2n brad. jadi udpdate blognya rada jarang. hehehe.
Amdhas mengatakan…
Disitu kita ga bikin hover ya? kalu di kasih hover mantap seperti di demo.
Mimi Taria mengatakan…
yang warna kuning tuch bagus banget bang,,,,
Untitled mengatakan…
gak yang warna kuning aja..
semuanya pada bagus...WWWaaawww!!!!!!!!
Ladida Cafe mengatakan…
wah, CSS bisa dibikin gini juga yah . ,

bro chugy kalo ga keberatan tolong posting ttg CSS callout dan penjelasannya, terima kasih ^^

sukses selalu

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text