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: One Cyber™
Tittle: Starbursts Effect Dengan CSS3 Rotation
Read More>>

Jika Anda ingin mengedit file musik/mp3 dengan cara memotong file mp3 tersebut untuk di ambil beberapa nada yang Anda suka saja, maka Anda bisa menggunakan software MP3 Cutter. MP3 Cutter merupakan salah satu software audio gratisan yang berfungsi untuk memotong-motong file musik mp3 dengan mudah dan cepat.

Yang perlu dilakukan cuma memasukan file input mp3 yang kamu punya, kemudian pada saat file mp3 tsb dimainkan (playback), kamu tinggal meng-klik tombol “Set start” untuk menandai bagian awal file mp3 yang akan di potong, sedangkan tombol “Set end” untuk mengakhiri bagian dari potongan file mp3 yang telah kamu seleksi. Terakhir tinggal disimpan file hasilnya melalui tombol “Save selection”.

Sesuai dengan nama softwarenya MP3 Cutter, file yang didukung program ini hanya file dalam format .mp3, begitu pula dengan hasil outputnya. Tapi program ini cukup membantu dalam hal keperluan potong-memotong file mp3 koleksi kamu dengan mudah dan cepat. Mungkin kamu ingin memgambil bagian reff-nya saja untuk ringtone di handphone kamu, atau buat dimasukkan ke dalam installer program buatan kamu dsb.

Bagi yang berminat silahkan download di bawah ini.
Download Mp3Cutter

Author: One Cyber™
Tittle: Mp3 Cutter | Pemotong File Music Mp3
Read More>>
Kali ini One Cyber™ akan Posting tentang Free Download Adobe Photoshop CS1,CS2,CS3,CS4,CS5 Portable. Seperti yang kita ketahui Adobe Photoshop merupakan perangkat lunak editor foto atau gambar serta pembuatan efek foto dan gambar milik Adobe Systems. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3 , versi kesebelas adalah Adobe Photoshop CS4 dan versi yang terakhir (keduabelas) adalah Adobe Photoshop CS5. Dibawah ini telah disediakan untuk anda semua adobe photoshop portable CS1,CS2,CS3,CS4 dan CS5.

Persyaratan Sistem :
Windows :
* 1.8GHz atau prosesor lebih tinggi
* Microsoft Windows Semua versi XP/Vista/7
* 512MB RAM ( direkomendasikan 1GB)
* tersedia ruang hard-disk 1GB untuk instalasi; ruang kosong tambahan diperlukan selama instalasi ( tidak dapat menginstal pada flash berbasis perangkat penyimpanan )
* 1.024 x768 display (direkomendasikan 1.280 X800) dengan 16-bit video card
* Beberapa fitur GPU -accelerated memerlukan dukungan grafis untuk Shader Model 3.0 dan OpenGL 2.0
* DVD- ROM
* perangkat lunak yang diperlukan untuk fitur multimedia (QuickTime 7.2)
* Koneksi Internet Broadband yang diperlukan untuk layanan online

Cara Instalasi : Klik dua kali pada File exe

Link Download Adobe Photoshop CS1 - CS5 Portable :
~ Adobe Photoshop CS1
~ Adobe Photoshop CS2
~ Adobe Photoshop CS3
~ Adobe Photoshop CS4
~ Adobe Photoshop CS5
   
Password : Tsyum


Author: One Cyber™
Tittle: Free Download Adobe Photoshop CS1,CS2,CS3,CS4,CS5
Read More>>

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