Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / HT M L5 ve CSS3 i l e Ya p ra k M en ü
HTML5 ve CSS3 ile Yaprak Menü Vatanay Özbeyli tarafından 29 Mayıs 2013 tarihinde yazıldı. ~ 1 Yorum + Değiştir
CSS’in transition efektleriyle ilgili bir çok çalışma yaptık. Fiziksel efektlerinden de rotate ve bluru daha önce birkaç kez kullandık. Hadi gelin hem o bilgileri pekiştirelim hem de gayet şık bir menü tasarımı yapalım. Ama öncesinde aşağıdaki örnek .GIF dosyasını görüntülemenizde fayda var.
Ya da canlı test etmek isteyebilirsiniz :
Başlayalım HTML5′in nav tagı ile başlıyoruz. HTML kodlarımız aşağıdaki şekilde : 1 <nav> 2 <ul class="top-menu"> 3 <li><a target="_blank" href=http://www.adobewordpress.com/>Giriş</a><div class="menu-item" id="Giriş"></div></li> 4 <li><a target="_blank" href=http://www.adobewordpress.com/wordpress/>WordPress</ <div class="menu-item" id="WordPress"></div></li> 5 <li><a target="_blank" href=http://www.adobewordpress.com/photoshop/>Photoshop</ <div class="menu-item" id="Photoshop"></div></li> 6 <li><a target="_blank" href=http://www.adobewordpress.com/tasarimunsurlari/html5-tasarim-unsurlari/>HTML5</a><div class="menu-item" id="HTML5"></div></li> 7 <li><a target="_blank" href=http://www.adobewordpress.com/tasarimunsurlari/css/>CSS3</a><div class="menu-item" id="CSS3"></div></li> 8 </ul>
9 </nav> Sırada CSS kodlarımız var. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
#Giriş { background: #9f4040;} #WordPress { background: #7a9f40;} #Photoshop{ background: #b03c99;} #HTML5 { background: #9f8340;} #CSS3 { background: #40719f;} nav{margin:0 auto;width:600px;margin-top:100px;} .top-menu li { -webkit-filter: blur(1px); -moz-filter: blur(1px); -o-filter: blur(1px); -ms-filter: blur(1px); filter: blur(1px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius= font-family: Arial , sans-serif; display: inline-block; text-align: center; margin: 30px 5px; position: relative; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .top-menu li:hover { -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius= margin: 30px 20px; } .top-menu li:active { margin: 30px 33px; } .top-menu li a { width: 80px; height: 80px; z-index: 9999; position: absolute; top: 32px; font-weight: bold; display: block; text-decoration: none; font-size: 12px; color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1); -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; } .top-menu li:active a { font-size: 16px; top: 30px; text-shadow: none; } .top-menu li div.menu-item { width: 80px; height: 80px; display: block;
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -webkit-border-top-left-radius: 100px; -webkit-border-bottom-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; border-top-left-radius: 100px; border-bottom-right-radius: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); } .top-menu li:hover div.menu-item{ -webkit-border-top-left-radius: 80px; -webkit-border-bottom-right-radius: 80px; -moz-border-radius-topleft: 80px; -moz-border-radius-bottomright: 80px; border-top-left-radius: 80px; border-bottom-right-radius: 80px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); } .top-menu li:active div.menu-item{ -webkit-border-top-left-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomright: 50px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; }
Kapanış Özellikle CSS3 elementlerini kullandığımız daha birçok tasarım hazırlayacağız. Menünün üzerine gelindiğinde bulanıklık kalkmakta fark ettiğiniz gibi. Fakat performans veya görsel açıdan bu efekti beğenmeyen olabilir. Dolayısıyla bluru kaldırmak isteyenler şu satırları silmeli : 10, 11, 12, 24, 25, 26. Silmeye alttan başlarsanız satırlar kaymadığı için problem yaşamazsınız. İyi çalışmalar.
Benzer Konular: CSS ile Toogle Menü Sadece CSS ile Yatay Menü Web Sayfanıza Etkileyici Giriş Paneli
CSS ile Etkileyici Gölge Efektleri CSS3 Şekiller
Yazı Kategorisi : CSS3 , HTML5 , Tasarım Unsurları Anahtar Kelimeler : blur , CSS3 , design , geçiş , html5 , leaf , menu , rotate , transition