Beranda CSS3

Membuat Starbursts Effect With CSS3 Rotation

19.55
A+ A- Print Email
Entah apa nama yang pas untuk mendeskripsikan tutorial yang akan saya berikan kali ini :) Soalnya, klo dibilang ini Menu Navigasi, menurut saya sih bukan, terus klo dibilang Button pun, menurut saya ini juga terlalu kegedeaan haha... itu kenapa, sesuai bentuknya yang agak-agak mirip sama bintang, akhirnya saya kasih nama "Starbursts" aja haha... tapi klo anda mau ngasih nama lain, ya gak kenapa-napa juga sih haha...

Okeh, sesuai judulnya, kali ini kita gak akan nyentuh-nyentuh yang namanya Image ataupun Javascript, karena kali ini kita hanya akan memanfaatkan efek rotasi yang bisa kita hasilkan dari CSS3. Dan sebelum saya kasih tau caranya, saya cuma mau ngingetin lagi, klo dalam aturan rotasi CSS3 ini, kita harus mengawali aturan rotasi dengan -moz- untuk Firefox dan -webkit- untuk webkit, Yupz cuma itu, selebihnya sih sama aja kaya aturan CSS yang lama.

Dan sebelum saya kasih Source CSS dan HTML-nya, demo bisa anda lihat pada demo dibawah ini untuk melihatnya secara langsung :)

Dan jika berminat untuk membuatnya, silahkan ikuti panduan singkat dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

/* Starbursts */
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 1 */
.starburst1 {
display:block;
width:6em;
height:6em;
background:#ff47ab;
-webkit-transform:rotate(-22.5deg);
-moz-transform:rotate(-22.5deg);
rotation:-22.5deg;
position:absolute;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#fff;
font-weight:bold;
font-family:Arial, sans-serif;
text-shadow:0 0 3em #f00, 0 0 4px #88004a;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
transition: transform 0.3s ease;
}
.starburst1 span {
display:block;
width:6em;
height:6em;
background:#ff47ab;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
rotation:45deg;
}
.starburst1:hover,
.starburst1:hover span {
background:#f00;
color:#fff;
text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst1:hover {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-405deg;
}
/* Starburst 2 */
.starburst2 {
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;
text-shadow:0 0 3em #f00, 0 0 4px #f30;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
}
.starburst2 span {
display:block;
width:6em;
height:6em;
background:#fe0;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
}
.starburst2:hover,
.starburst2:hover span {
background:#fa0;
color:#fff;
text-shadow:0 0 20px #fff, 0 0 8px #fff;
}
.starburst2:hover {
-webkit-transform:rotate(315deg);
-moz-transform:rotate(315deg);
rotation:315deg;
}
/* Starburst 3 */
.starburst3 {
display:block;
width:6em;
height:6em;
-webkit-transform:rotate(-67.5deg);
-moz-transform:rotate(-67.5deg);
rotation:-67.5deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
text-shadow:0 0 3em #04b3df, 0 0 4px #0077e5;
font-size:1em;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.starburst3 span {
display:block;
width:6em;
height:6em;
background:#00f4b2;
-webkit-transform:rotate(11.25deg);
-moz-transform:rotate(11.25deg);
rotation:12.5deg;
}
.starburst3:hover span {
background:#00e530;
}
.starburst3:hover {
left:2.5em;
top:1.5em;
}
/* Starburst 4 */
.starburst4 {
display:block;
width:6em;
height:6em;
-webkit-transform:rotate(-67.5deg);
-moz-transform:rotate(-67.5deg);
rotation:-67.5deg;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-family:Arial, sans-serif;
text-shadow:-1px -1px -1px #fff, 1px 1px 1px #00f;
}
.starburst4 span {
display:block;
width:6em;
height:6em;
background:#78d7ff;
-webkit-transform:rotate(22.5deg);
-moz-transform:rotate(22.5deg);
rotation:22.5deg;
-moz-border-radius:2.5em;
-webkit-border-radius:2.5em;
border-radius:2.5em;
-moz-transition: -moz-border-radius 0.2s ease-in;
-webkit-transition: -webkit-border-radius 0.2s ease-in;
transition: border-radius 0.2s ease-in;
}
.starburst4:hover {
background:transparent;
}
.starburst4:hover span {
background:#08f;
color:#fff;
text-shadow:0 0 20px #fff, 0 0 8px #fff;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
/* Starburst 5 */
.starburst5 {
display:block;
width:6em;
height:6em;
background:#7e00df;
position:relative;
top:2em;
left:2em;
text-align:center;
text-decoration:none;
color:#fff;
font-weight:bold;
font-family:Arial, sans-serif;
text-shadow:0 0 3em #04b3df, 0 0 4px #ff0;
font-size:1em;
-webkit-transform:rotate(-56.5deg);
-moz-transform:rotate(-56.5deg);
rotation:-56.5deg;
}
.starburst5 span {
display:block;
width:6em;
height:6em;
background:#7e00df;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
-moz-transition: -moz-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.starburst5:hover {
background:#7e00df;
}
.starburst5:hover span {
-webkit-transform:rotate(11.25deg);
-moz-transform:rotate(11.25deg);
rotation:11.25deg;
}
/* Starburst 6 */
.starburst6 {
display:block;
width:8em;
height:2.5em;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
rotation:180deg;
position:relative;
top:3.75em;
left:2em;
text-align:center;
text-decoration:none;
color:#fff;
font-weight:bold;
font-family:Arial, sans-serif;
}
.starburst6 span {
display:block;
margin:0 auto;
width:6em;
height:2.5em;
background:#f00;
text-shadow:0 0 3em #04b3df, 0 0 4px #0077e5;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
rotation:45deg;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.starburst6:hover span {
background:#f90;
width:8em;
-moz-border-radius:2.5em;
-webkit-border-radius:2.5em;
border-radius:2.5em;
text-shadow:0 0 3em #f00, 0 0 4px #f88;
}
.starburst6:hover {
left:2em;
width:8em;
background:transparent;
}
/* Starburst 7 */
.starburst7 {
display:block;
width:8em;
height:3em;
position:relative;
top:3.75em;
left:1em;
text-align:center;
text-decoration:none;
color:#fff;
font-weight:bold;
font-family:Arial, sans-serif;
}
.starburst7 span {
display:block;
width:8em;
height:2.5em;
background:#00cd00;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-moz-border-radius:2em;
-webkit-border-radius:2em;
border-radius:2em;
text-shadow:1px 1px 1px #000;
}
.starburst7:hover {
background:transparent;
}
.starburst7:hover span {
-webkit-transform:rotate(52.5deg);
-moz-transform:rotate(52.5deg);
rotation:52.5deg;
-webkit-transform:translate(1em, 0);
-moz-transform:translate(1em, 0);
translate(1em, 0);
}

5. Jika Sudah, taruh kode dibawah ini, dibawah kode <body> , (Bisa juga ditaruh "Tambah Gadget" pada bagian sidebar..

<ul class='starbursts'>
<li>
<a class='starburst1' href='#'><span><br/>Negri<br/>5<br/>Menara</span></a>
</li>
<li>
<a class='starburst2' href='#'><span><span><span><br/>Negri<br/>5<br/>Menara</span></span></span></a>
</li>
<li>
<a class='starburst3' href='#'><span><span><span><span><span><span><span><span><br/>Negri<br/>5<br/>Menara</span></span></span></span></span></span></span></span></a>
</li>
<li>
<a class='starburst4' href='#'><span><span><span><span><br/>Negri<br/>5<br/>Menara</span></span></span></span></a>
</li>
<li>
<a class='starburst5' href='#'><span><span><span><span><span><span><span><br/>Negri<br/>5<br/>Menara</span></span></span></span></span></span></span></a>
</li>
<li>
<a class='starburst6' href='#'><span><span><span><span>E-Book<br/>negri 5 Menara</span></span></span></span></a>
</li>
<li>
<a class='starburst7' href='#'><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span><span>E-Book<br/>Negri 5 Menara</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></a>
</li>
</ul>

Udah? klo udah silahkan Save Template anda dan lihat hasilnya ...

Keterangan: Kode CSS untuk 7 bentuk Starbursts yang saya buat sengaja saya gabung menjadi satu, dengan memberikannya keterangan serta warna yang berbeda untuk membantu anda mempelajarinya satu-persatu :) dan untuk HTML-nya silahkan ganti kata-kata atau simbol yang saya beri warna merah dengan url dan kata-kata yang ingin anda tampilkan

Good Luck Alll.. :)