3D telefon iconu tasarımı

Css3 3D telefon iconu örneği

Sürekli aynı örnekleri paylaştıkça insanda heves kalmıyor doğrusu. Aslında bir noktadan sonra yapabilecek birşey bile aklımıza gelmiyor bazen. Bir çok tasarımcının Dribbble sitesindeki örneklerden esinlenerek birşeyler hazırladığına şahit olmuştum daha önceleri. Bugün bende ufak bir değişiklik olsun diye Dribbble sitesindeki tasarımları inceledim. Sunako isimli tasarımcı tarafından hazırlanmış olan 3D görünümlü telefon ikonunu görünce bir de Css üzerinde denemesini yapmaya çalıştım. Aslında buradaki amacım sizlere 3D şeklinde çerçeve kenarlarının nasıl yapıldığını göstermekti. Bu tasarım örneği sayesinde hiç kullanmasanız bile mutlaka bir yerlerde çerçevelere 3D görüntü vermek isteyeceksiniz. Bu yüzden arşivinizde bulunması sizin için faydalı olacağını düşünüyorum.

Sunako tarafından hazırlanmış örneğe benzemiş olsa da yeşil alanın ortası açık renkli olmadığı için tamamen benzetemedim. Daha doğrusu bir, iki saat sonra burada sabah olacağı için bu şekilde sizlere paylaşmak zorunda kaldım. Örnekte kullandığım ikonu Font Awesome’den temin ettim. Olur da örnek hoşunuza gider web sitenizin herhangi bir köşesine bu tarz bir örnek ile web sitenizde iletişim ya da sosyal ağ ikonları kullanacaksanız eğer Font Awesome sitesinden daha değişik ikonlar temin edebilirsiniz. 3D gibi görünen bu örneğin Css kodlarında zaten dikkat ederseniz bu şekilde görünmesini sağlayan kodları apaçık görebilirsiniz. Text-shadow ve box-shadow kodları içinde sadece alt kısımlara gölge efekti verip blur derecesi sıfır olarak ayarlanınca böyle bir görüntü çıkıyor ortaya.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölüm.

Css :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}
ul.cerceve {
   width:600px;
   height:350px;
   margin: 100px auto;
   padding: 90px 20px 20px 230px;
   background: #dbebd0;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbebd0', endColorstr='#88997e');
   background: -webkit-gradient(linear, left top, left bottom, from(#dbebd0), to(#88997e));
   background: -moz-linear-gradient(top, #dbebd0, #88997e);
   background: -o-linear-gradient(top, #dbebd0, #88997e);
   background: linear-gradient(top, #dbebd0, #88997e);

}
li.icon {
   width:150px;
   height:150px;
   overflow:hidden;
   display:block;
   float:left;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#85d662', endColorstr='#48a025');
   background: -webkit-gradient(linear, left top, left bottom, from(#85d662), to(#48a025));
   background: -moz-linear-gradient(top, #85d662, #48a025);
   background: -o-linear-gradient(top, #85d662, #48a025);
   background: linear-gradient(top, #85d662, #48a025);
   border-bottom: 2px solid #5cac33;
   border-top: 0.8px solid #67b748;
   text-shadow:0px 0px 13px rgba(0,0,0,.3);
   border-radius: 30px;
   box-shadow: 0px 6px 0px #2e7219,
               0px 6px 5px #2e7219,
               0px 10px 10px rgba(0,0,0,.4);
   background-color:#5cac33;
}
li.icon a:before {
	border-radius: 10px;
	font: normal 100px FontAwesome;
	content: 'f095';
	color:#d1edbf;
	padding: 25px 0px 0px 35px;
    border-radius: 5px 5px 5px 5px;
    text-shadow: 0px 6px 0px #86c365,
                0px 5px 0px #565656,
                0px 10px 10px rgba(0,0,0,.4);
}

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<ul class="cerceve">
  <li class="icon"><a></a></li>
</ul>