HTML5 ve CSS3 ile Yaprak Menü

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 :

ÖRNEĞİ GÖRÜNTÜLE

Başlayalım

HTML5’in nav tagı ile başlıyoruz. HTML kodlarımız aşağıdaki şekilde :

<nav>
<ul class="top-menu">
<li><a target="_blank" href=https://www.adobewordpress.com/>Giriş</a><div class="menu-item" id="Giriş"></div></li>
<li><a target="_blank" href=https://www.adobewordpress.com/wordpress/>WordPress</a><div class="menu-item" id="WordPress"></div></li>
<li><a target="_blank" href=https://www.adobewordpress.com/photoshop/>Photoshop</a><div class="menu-item" id="Photoshop"></div></li>
<li><a target="_blank" href=https://www.adobewordpress.com/tasarim-unsurlari/html5-tasarim-unsurlari/>HTML5</a><div class="menu-item" id="HTML5"></div></li>
<li><a target="_blank" href=https://www.adobewordpress.com/tasarim-unsurlari/css/>CSS3</a><div class="menu-item" id="CSS3"></div></li>
</ul>
</nav>

Sırada CSS kodlarımız var.

#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='1');

font-family: Arial , sans-serif;
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
transition: all 0.6s ease; 
-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='0');
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;
-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.