The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

Cool Animated CSS3 Menu Tutorial

Tutorial Ini Tentang Memahami,Belajar Dan Memahami Beberapa Fitur Baru Dan Css3.
Anda akan Belajar bgmna membangun Menu Navigasi Keren Bulat dengan tidak ada gambar dan tidak ada Javascript,dan efektif memanfaatkan Perbatasan Properti Css3 Baru-Radius dan animasi.
Menu Ini bekerja sempurna baik dengan Chrome dan Safari dengan Firefox yang bekerja Border-Radius Besar Tapi Tidak Animasi.







Step 1:Struktur Html Navigasi
Struktur Html Dasar Menu Memilki Daftar Item 3 "Brand","Promotion" Dan "Ivent"

Step 2:Membuat Warna Latar Belakang Menu
Dalam langkah ini kita akan memberikan Area Navigasi Utama (Css3 Tutorial) Latar Belkang Gelap.Lebar,Tinggi dan Padding Benar2 Opsional.

.css3Tutorial {
background: #14080a;
width:506px;
height:260px;
padding:20px;
}


Step 3:Round Navigasi Dengan Border-Radius
Sekarang Kita akan Membuat Setipa Li(Item Navigasi) Bulat Dgn Css3 Keren,Lebih Kusus Dengan Properti border-radius,sejauh ini navigasi bekerja dengan baik dgn Chrome,safari dan Firefox.



ul {
list-style: none;
}
li {
float:left;
font: 14px/10px Arial, Verdana, sans-serif;
color:#FFF;
background-color: #b6f5fe;
width: 80px;
height: 80px;
padding:20px;
margin:0 30px 0 0;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}


Step 4:Mensejajarkan Poin Navigasi
Dalam Langkah Ke empat Ini Kita akan Memberikan Setiap ELemen Li(Item Navigasi) Warna Latar Belakang yang Unik dan Posisi

li#brand {
background-color: #e1f5b8;
}
li#promotion {
background-color: #b6f5fe;
margin-top:100px;
}
li#event {
background-color: #f9bde6;
margin-top:50px;
}


Step 5:Mensejajarkan Link dalam Menu

li a {
color:#FFF;
text-decoration:none;
display:block;
width: 80px;
height: 45px; text-align: center;
padding:35px 0 0 0;
margin:0 40px 0 0;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
li#brand a {
background-color: #afe43f;
}
li#promotion a {
background-color: #03aec7;
}
li#event a {
background-color: #ba1886;
}


Step 6:Menentukan Properti Untuk Pengaruh Hover

li a:hover,
li a:focus,
li a:active {
width: 120px;
height:65px;
padding:55px 0 0 0;
margin:-20px 0 0 -20px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}


Step 7:Menambahkan Animasi Ke Navigasi
Properti Animasi Untuk Navigasi ini Bekerja Sempurna Dengan Chrome,Safari Tapi Perjuangan Dengan Firefox.

li a:hover,
li a:focus,
li a:active {
-webkit-animation-name:bounce;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:4;
-webkit-animation-direction:alternate;
}
@-webkit-keyframes bounce{from{margin:0 40px 0 0;}
to{margin:120px 40px 0 0;}
}


Note:Anda Sekarang Telah Beljar Membangun Sliding Navigasi Tanpa JAVASCRIPT,tidak ada gambar dan hanya di dukung oleh beberapa sifat Css3.
Harap Di Ingat Menu ini Hanya Konsep dan tidak Di bangun di alam liar,kita akan harus Menunggu Chrome,safari samping Untuk semua Browser Untuk Chath-Up Untuk Di gunkan Bisa Semua Fitur Css3.

Sumber Referensi:http://webstandard.kulando.de

ARTIKEL TERKAIT



14 komentar:

Muhammad Chandra mengatakan...

mantep juga nih.. ,, kapan-kapan boleh di coba nih sob :)

Botzzz mengatakan...

Ok mas..makasih atas kunjunganya..:)

M.Iqbal Arifhan mengatakan...

kunjungan balik nih sob dari sahabat baru, wah postingan yang bagus...kapan-kapan patut di coba nih sob....

wacana mengatakan...

saya baru pertama kali berselancar kehalaman ini, dan langsung terkesan...
blog sampean sangat menarik..

karena kunjungan perdana salam kenal dulu pak..

TuSuda mengatakan...

wah..dapat ilmu baru lagi nih tentang program ngeblog..
ijin save dulu untuk dipelajari teknis runutannya.
Terimakasih...

iskandaria mengatakan...

Mantap juga ya efeknya. Jujur, saya sangat tertarik mempraktekkannya. Kayaknya juga nggak terlalu memakan resource seperti efek box-shadow.

Galuh Ristyanto mengatakan...

Kunjungan balik mas.
HTML5-nya donk mas. Masih jarang tuh yg ngasih tutorial dalam bahasa Indonesia.

Gori mengatakan...

boleh... boleh.. boleh..

I'm → Botzzz mengatakan...

@All Makasih atas Kunjungan dan Komentarnya....:)

BRI Jakarta Veteran mengatakan...

nice posting sahabat

topjer mengatakan...

halooooo sob,, ilmu baru neh,,
mo ngasih saran klo bsa dkasih shoutbox ato buku tamu biar sobat yang lain bisa blog walking :)

I'm → Botzzz mengatakan...

@Topjer: maaf sobat untuk sementara saya blm pake shoutbox,,ntar saya pakai kok,,makasih atas saranya..:)

Koko Bota mengatakan...

di save dulu sobat....nice info..:)

Rizky2009 mengatakan...

aq sebebnranya suka yg bulet2 gini, tp apakah bisa mendukung di semua broser, kalau misalnya di opera tampliannya bulet atau malah kotak2 yah sob, test dulu ah

Posting Komentar