Partners

Free Tips And Trick Blog, Music K-POP, etc ßεšt Çhεâtεr Dark_404 AlpinJanitra
One Cyber™
Free For All

web hit counter

Oke, Setelah beberapa minggu saya gak posting, kali ini saya mau posting tentang 'Membuat Starbursts Effect Dengan Menggunakan CSS3 Rotation'. 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 gambar paling atas atau silahkan klik link demo dibawah ini untuk melihatnya secara langsung.
Bagaimana ? Tertarik untuk membuatnya ? silahkan ikuti panduan singkat saya dibawah ini:
1. Login ke akun blogger kalian.
2. Pilih Rancangan, Edit HTML

3. Beri tanda checklist pada  Expand Widget Template 
4. Cari kode ]]></b:skin>
5. Letakkan kode CSS berikut diatas kode :
 ]]></b:skin>


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);
}

Klo udah silahkan letakkan HTML dibawah ini, ditempat yang anda inginkan, entah itu setelah kode <body> atau ditempat lain sesuai kebutuhan anda .


<ul class='starbursts'>
<li>
<a class='starburst1' href='#'><span><br/>Blog<br/>One<br/>Cyber™</span></a>
</li>
<li>
<a class='starburst2' href='#'><span><span><span><br/>Blog<br/>One<br/>Cyber™</span></span></span></a>
</li>
<li>
<a class='starburst3' href='#'><span><span><span><span><span><span><span><span><br/>Blog<br/>One<br/>Cyber™</span></span></span></span></span></span></span></span></a>
</li>
<li>
<a class='starburst4' href='#'><span><span><span><span><br/>Blog<br/>One<br/>Cyber™</span></span></span></span></a>
</li>
<li>
<a class='starburst5' href='#'><span><span><span><span><span><span><span><br/>Blog<br/>One<br/>Cyber™</span></span></span></span></span></span></span></a>
</li>
<li>
<a class='starburst6' href='#'><span><span><span><span>One<br/>Cyber™</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>One<br/>Cyber™</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></a>
</li>
</ul>

Keterangan :  
Ganti tulisan warna Merah Dengan tulisan anda sendiri.

Rating : 5.0
Author :Unknown
Title :Starbursts Effect Dengan CSS3 Rotation
Rating :5.0

avatarAbout Author

  • Posting Starbursts Effect Dengan CSS3 Rotation, ditulis oleh Unknown. Bila ada artikel yang sudah tidak relevan atau ada link yang rusak, mohon pemberitahuannya melalui komentar dan bila ingin memposting ulang artikel ini di blog kalian, mohon untuk menampilkan link sumber, Terima kasih.
  • Posted by: Unknown Starbursts Effect Dengan CSS3 Rotation Updated at: 08.19

    17 komentar:

    Anonim mengatakan... Reply Comment

    gimana car bikin yang kaya di pojok kiri atas blog abang?

    Boriel Cyber mengatakan... Reply Comment

    ijin coba dulu gan.....

    Unknown mengatakan... Reply Comment

    @Anonim:.maksudnya biar penempatannya di pojok ? atau gimana yah ?

    @Admin ./Boriel Cyber ==:.silahkan di coba dulu..

    Anonim mengatakan... Reply Comment

    @One Cyber™: yang sama persis kaya yang dipojok.. warnanya.. bentuknya.. etc

    Adhitya mengatakan... Reply Comment

    Ane kog ga jdi ya ??

    Unknown mengatakan... Reply Comment

    @Anonim:.lah.. itu cuma pakai yang efek ke 5 truss di ganti warna ajah kok..

    @Aditya Ramadhan:.gk jadinya gimana ?

    Coporation mengatakan... Reply Comment

    share tutorial blog yg bnyak donk :D

    Unknown mengatakan... Reply Comment

    @Coporation: .iya seep..
    .di tunggu aja tutor berikutnya..

    Unknown mengatakan... Reply Comment

    gan bagi templatenya donk??

    h4ck3r_cga™ mengatakan... Reply Comment

    cara buat garis garis pembatas gimana agan cyber

    Unknown mengatakan... Reply Comment

    gan gmna cara biar judul widget ama widget nya pisah kyk punya agan gimna??

    Unknown mengatakan... Reply Comment

    Makasih Infonya =))

    Unknown mengatakan... Reply Comment

    maaf gan, kok gk jadi ya ?

    abang ichal mengatakan... Reply Comment

    waw keren keren nih

    FandroMax 48 mengatakan... Reply Comment

    Bagus nih triknya

    Visit balik and join ya http://hereday-syndicate.blogspot.com/

    Unknown mengatakan... Reply Comment

    Ribet.. masih susah.. (y)

    Unknown mengatakan... Reply Comment

    bagaimana cra edit photo dr photosof

    Posting Komentar


     
    ~Gunakan Google Chrome Untuk Tampilan Maksimal !!! Thank You !!!