Cara Membuat Menu Animasi CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan Membuat Menu Dropdown dengan CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com

Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi.. ?
Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini.

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://dinarcool.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Masukkan ke Gadget HTML/JavaScript

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.

1. angka 0.5s menandakan waktu perubahan dari animasi
2. angka 25deg menandakan rotasi perputaran dari area menu
3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

Source:http://lora-malunk.blogspot.com/2011/11/cara-membuat-menu-animasi-css3.html

Baca Selengkapnya»»

Cara Membuat Efek Bayangan Pada Teks Dengan CSS3

Mungkin ada sebagian dari sobat blogger yang belum tau mengenai macam-macam model border,
Sekarang saya akan memberikan beberapa contoh model border yang bisa sobat terapkan di blo.
Jika ada yang mau mecoba
Silahkan lihat beberapa contoh berikut :

Contoh penggunaan border

border: 5px solid #000000;

border: 5px dotted #000000;

border: 5px dashed #000000;

border: 5px inset #000000;

border: 5px outset #000000;

border: 5px double #000000;

border: 5px groove #000000;

border: 5px ridge #000000;

CSS3 Border Radius (Collectively)

#CSS3 {
       border: 5px solid #000000;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
}

CSS3 Border Radius (Individually)

#CSS3 {
border: 5px solid #000000;
       -moz-border-radius-topleft: 15px;
       -moz-border-radius-topright: 0px;
       -moz-border-radius-bottomright: 15px;
       -moz-border-radius-bottomleft: 0px;
       -webkit-border-top-left-radius: 15px;
       -webkit-border-top-right-radius: 0px;
       -webkit-border-bottom-left-radius: 0px;
       -webkit-border-bottom-right-radius: 15px;
}

CSS3 Border (Multipel)

#CSS3 {
       border-width:5px;
       border-style:solid;
       -moz-border-top-colors:blue red orange green purple yellow;
       -moz-border-right-colors:blue red orange green purple yellow;
       -moz-border-bottom-colors:blue red orange green purple yellow;
       -moz-border-left-colors:blue red orange green purple yellow;
}

Itulah beberapa-macam border CSS dan CSS3

Semoga bermanfaat

Baca Selengkapnya»»

Cara Memberi Background Kotak Komentar dengan CSS3

Kali ini saya akan menjelaskan bagaimana Cara Memberi Background Kotak Komentar dengan CSS3, karena sudah jamannya menggunakan CSS3 biar nggak ketinggalan jaman.
Langsung saja kita praktekkan cara membuatnya :

Seperti biasa Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

lalu cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Jika sudah ketemu, Copy kode berikut dan Paste di atas kode tersebut

#kotak_komentar{
background: url(http://i1002.photobucket.com/albums/af149/Imtikhan/background.jpg) ;
padding:20px;
width:530px;
height:250px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}

#kotak_komentar:hover{
background: url(http://i1002.photobucket.com/albums/af149/Imtikhan/background_hover.gif);
-webkit-box-shadow: 2px 2px 20px #cc40fb;
-moz-box-shadow: 2px 2px 20px #cc40fb;
}

Kemudian scroll ke bawah dan cari kode seperti berikut :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/></div>

Jika sudah ketemu letakkan kode berikut diatasnya

<div id='kotak_komentar'>

Dan kode berikut dibawahnya

</div>

Maka hasilnya akan menjadi seperti berikut :

<div id='kotak_komentar'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/></div>
</div>

Keterangan : ganti kode yang berwarna biru sesuai dengan Template sobat.
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Baca Selengkapnya»»

Cara Membuat Button Menggunakan CSS3

Banyak sobat blogger yang bertanya bagaimana cara membuat button seperti yang ada di blog saya. Tidak banyak basa-basi langsung saja kita praktekkan Cara Membuat Button Menggunakan CSS3
Berikut cara membuatnya :

Seperti biasa sobat harus login ke Blogger
Klik Rancangan → Edit HTML
Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
jika sudah ketemu letakan kode CSS berikut diatas kode ]]></b:skin>

/* button
----------------------------------------------- */
.button{
       background-color:#fff;
       background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
       background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
       color: #940f04;
       color:rgba(0,0,0,0.9);
       border:1px solid rgba(0,0,0,0.5);
       -moz-border-radius:3px;
       -webkit-border-radius:3px;
       -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
       -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
       text-shadow:1px 1px 0px rgba(255,255,255,0.8);
       padding: 3px;
       padding-top:3px;
       padding-bottom:3px;
       margin-right:3px;
}
.button a, .button:hover {
       background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
       background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
       color:#000;
       color:rgba(0,0,0,0.9);
       border:1px solid rgba(0,0,0,0.5);
       -moz-border-radius:3px;
       -webkit-border-radius:3px;
       text-shadow:1px 1px 0px rgba(255,255,255,0.8);
       text-decoration: none;
       padding: 3px;
       padding-top:3px;
       padding-bottom:3px;
       box-shadow: inset 0px 0px 5px #fbc26f;
       -webkit-box-shadow: inset 0px 0px 5px #fbc26f;
       -moz-box-shadow: inset 0px 0px 5px #fbc26f;
}

Keterangan : kode yang berwarna biru bisa sobat ganti sesuai selera
jika sudah selesai SIMPAN TEMPLATE

kemudian untuk mengaplikasikannya sobat tinggal memanggil kode button diatas yaitu dengan cara menambahkan kode class="button"

berikut contohnya :

contoh tidak menggunakan link

<a class="button">Cara Membuat Button Menggunakan CSS3</a>

Hasilnya akan tampak seperti dibawah

Cara Membuat Button Menggunakan CSS3


Dan contoh yang menggunakan link

<a href='http://dinarcool.blogspot.com/2011/07/cara-membuat-button-menggunakan-css3.html'class="button"> Cara Membuat Button Menggunakan CSS3</a>

Hasilnya akan tampak seperti dibawah

Cara Membuat Button Menggunakan CSS3


Selamat mencoba dan semoga berhasil

Baca Selengkapnya»»

Cara Membuat Efek Gradiasi Dengan CSS3

 Kali ini saya akan menjelaskan tentang Cara Membuat Efek Gradiasi Dengan CSS3 (fitur dari CSS3 yaitu efek gradiasi)
Dengan menggunakan fitur ini sobat dapat membuat efek gradiasi hanya dengan menambahkan sedikit kode CSS pada Template Blog sobat.

Berikut kode CSS3 untuk membuat efek gradiasi :

background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

Keterangan :
background: #ffa45a;
merupakan warna background yang akan muncul apabila browser tidak mendukung
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE.
StartColorstr='#ffa45a' adalah warna awal gradiasi dan
endColorstr='#ba5b0d' adalah warna akhir gradiasi
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll.
Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll.
From(#ffa45a) adalah warna awal gradiasi
to(#ba5b0d) adalah warna akhir gradiasi.
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas.
Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll.
#ffa45a adalah warna awal gradiasi
#ba5b0d adalah warna akhir gradiasi.
 
Ganti property background pada template blog sobat yang ingin dipasang efek gradiasi
Sobat juga bisa membuat efek gradiasi yang lebih bervariasi dengan menggunakan link dari CSS3 Gradient Generator

Berikut cara penerapan kode gradiasi di blog

Sebagai contohnya sobat ingin memasang efek gradiasi di bagian NavbarMenu

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
carilah kode seperti berikut :

#NavbarMenu {
background: #555 url(http://i1002.photobucket.com/albums/af149/Imtikhan/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}

Ganti kodeyang berwarna biru dengan kode efek gradiasi sehingga hasilnya menjadi seperti berikut :

#NavbarMenu {
background: #ffa45a; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d'); background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d)); background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Baca Selengkapnya»»