Advertise

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

9 komentar:

  1. dari lihat dmonya, aq paling suka dengan yang new css 3, maaf sob baru bisa kunjung kesini

    BalasHapus
  2. walahh masih belum ngerti nih gimana cara pasangnya sob... :) lihat demo nya keren juga tuhhh bisa berubah wujud pic nya.....!

    BalasHapus
  3. PR naik...jadi lama bikin tutorial brad..hehehehhe..sekali kluar ya gini....amazing!....salutate!

    BalasHapus
  4. Belantara Indonesia :: Sebenarnya lagi buat proyek kecil2n brad. jadi udpdate blognya rada jarang. hehehe.

    BalasHapus
  5. Disitu kita ga bikin hover ya? kalu di kasih hover mantap seperti di demo.

    BalasHapus
  6. yang warna kuning tuch bagus banget bang,,,,

    BalasHapus
  7. gak yang warna kuning aja..
    semuanya pada bagus...WWWaaawww!!!!!!!!

    BalasHapus
  8. wah, CSS bisa dibikin gini juga yah . ,

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

    sukses selalu

    BalasHapus