Biz de CSS’in perspective tanımı ile alakalı konuşmaya devam ediyoruz. Bugün sizlerle birlikte, üzerine gelindiğinde arkaya doğru yaslanan bir buton tasarımı hazırlayacağız.
CSS ile 3 boyutlu buton nasıl yapılır?
Daha önceki makalelerimizde de bu konuya değinmiştik. İsterseniz “CSS ile Basılabilen 3 Boyutlu Buttonlar” başlıklı yazımıza da göz atabilirsiniz.
Bu aşamada yapacağımız işlem gayet basit. İlk olarak temel haliyle bir buton oluşturacağız. Sonrasında bu butonun çerçevesine perspective tanımı yapacağız. Böylece işin içersine 3 boyut desteği girecek. Daha sonra da butona vereceğimiz rotate tanımlamalarıyla normal ve hover kontrolü yapacağız.
Hazırsanız başlayalım.
HTML Kodları
Bir çerçeve, içerisine de buton oluşturalım.
<p class="ucboyutlu">
<a href="#">3 Boyutlu Button</a>
</p>
Bu kadar. Şimdi bu butonu stilize edelim.
CSS Kodları
İlk olarak çerçevemizi yani paragraf elemanımızı tasarlayalım.
.ucboyutlu
perspective:1200px;
display:inline-block;
font:400 1em Tahoma;
Şimdi de klasik yapıdaki butonumuzu stilize edelim.
.ucboyutlu a
padding:.8em 2em;
color:white;
transition:all 0.4s;
display:block;
background:#1abc9c;
transform-style:preserve-3d;
text-decoration:none;
background: linear-gradient(#16a085, #1abc9c);
Yeşil tonlaması güzel gözükecektir. Sırada :after öğesi kontrolü var. Rotate işlemi için renk tanımlayalım.
.ucboyutlu a:after
width:100%;
height:40%;
left:0;
top:99%;
background:#0c816a;
transform-origin: 0% 0%;
transform:rotateX(-90deg);
content:"";
position:absolute;
z-index:-1;
transition:all 04.s;
Ve üzerine gelindiğinde X ekseninde 35 derece çevirelim.
.ucboyutlu a:hover
transform:rotateX(35deg);
Bitti.
Kapanış
Bu tip küçük tasarım makalelerinde amacımız sanıldığı gibi freeby paylaşmak değil, CSS3’ün temelini oluşturacak 3 boyut algısını sizlere aktarabilmektir. Umarız minik örneklendirmelerimiz sizlere faydalı olmaktadır.
İyi çalışmalar.
CSS ile 3D Buton
Hiç yorum yok:
Yorum Gönder