Kaç gündür sizlere Font Awesome ikonlarını kullanarak 3D küp şeklinde görünen bir Css3 yan menü örneği hazırlamak istiyordum. Ama her fırsatta diğer yazılarda da belirttiğim gibi aklıma başka tür örnekler geldiği için bir türlü 3D küp şeklinde görünen Css3 menü örneğini sizlerle tanıştırma fırsatım olmadı 🙂 Aslında bugünde başka bir örnek hazırlayacaktım ama o kadar Css3 örneğini paylaştıktan sonra daha fazla geçiştirmek pek doğru olmazdı.
Css3 3D görünümlü küp şeklindeki menü örneğini sanırım abartılı olarak biraz büyük yaptım. Normalde websitelerinin sidebar bölümü genişliği en fazla 300px olur. Daha geniş olanları da var ama çok çok az diyebileceğim bir miktar. Her bir küpün genişliğini 150px olarak ayarladım. Yani 300pxlik bir sidebara sahipseniz tam olarak yan yana iki tane sığmayacaktır (sidebar padding değeri yüzünden). Genişlik oranını ne yaparsam yapayım sonuçta birileri mutlaka kendi sitesine uymadığı için boyutlarını değiştirecektir. O yüzden örneğin daha iyi incelenebilmesi için bu şekilde büyük hazırladım.
3D küp şeklinde görünen Css3 menü örneğinde görünen ikonları Font Awesome yardımıyla ekledim. Rastgele markalaşmış ikonlar bölümünden seçtim bunları. Buradan Font Awesome ikonlarını inceleyip kendi sitenizin kategorilerine uygun olan ikonları ekleyebilirsiniz. Yada kendi tasarlamış olduğunuz ikonları eklersiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Font Awesome css adresi :
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Css :
body {
background-color:#CCCCCC;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
}
ul.cerceve {
width:500px;
height:auto;
margin: 0 auto;
}
li.contentBox {
width:150px;
height:150px;
overflow:hidden;
position:relative;
display:block;
float:left;
margin:1%;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
li.contentBox .imgBox {
width:150px;
height:150px;
background-color:#999999;
position:relative;
display:block;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(900px) rotateX(0deg);
-moz-transform: perspective(900px) rotateX(0deg);
-ms-transform: perspective(900px) rotateX(0deg);
-o-transform: perspective(900px) rotateX(0deg);
-transform: perspective(900px) rotateX(0deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.contentBox:hover .imgBox {
margin-top:-150px;
-webkit-transform: perspective(900px) rotateX(90deg);
-moz-transform: perspective(900px) rotateX(90deg);
-ms-transform: perspective(900px) rotateX(90deg);
-o-transform: perspective(900px) rotateX(90deg);
-transform: perspective(900px) rotateX(90deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.contentBox .textBox {
width:150px;
height:150px;
position:relative;
display:block;
background-color:#999999;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(900px) rotateX(-90deg);
-moz-transform: perspective(900px) rotateX(-90deg);
-ms-transform: perspective(900px) rotateX(-90deg);
-o-transform: perspective(900px) rotateX(-90deg);
transform: perspective(900px) rotateX(-90deg);
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
li.contentBox:hover .textBox {
background-color:#fff;
-webkit-transform: perspective(900px) rotateX(0deg);
-moz-transform: perspective(900px) rotateX(0deg);
-ms-transform: perspective(900px) rotateX(0deg);
-o-transform: perspective(900px) rotateX(0deg);
transform: perspective(900px) rotateX(0deg);
}
li.contentBox a{
text-decoration:none;
font-size:100px;
margin-left:33px;
margin-top:20px;
display:block;
position:absolute;
color: #666;
text-shadow: 2px 4px 5px #333;
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<ul class="cerceve">
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-android"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-android"></i></a></i></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-apple"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-apple"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-windows"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-windows"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-linux"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-linux"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-youtube"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-youtube"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-skype"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-skype"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-github"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-github"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-html5"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-html5"></i></a></div>
</li>
<li class="contentBox">
<div class="imgBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-dropbox"></i></a></div>
<div class="textBox"><a href="https://www.mintik.com/?p=14846"><i class="fa fa-dropbox"></i></a></div>
</li>
</ul>