0 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.

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

Tweet

Komentar →