3D telefon iconu tasarımı

2
641
views

dialling ikon

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.

Kullanım

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

Css :

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

Html :

Aranan kelimeler:

  • teleon iconu
1 oy (1 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikVantage
Sonraki İçerikFinale

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

2 YORUMLAR

CEVAP VER

Please enter your comment!
Please enter your name here