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

Css3

• Css3 Di Opera Membangun Masa Depan
• Simple Navigation Rocketbar With Jquery & Css3
• Cool Animated CSS3 Menu Tutorial
• Navigation Menu Css3 Tutorial Dan Techniques