3D vertical navigation

0
175
views

Yine mükemmel  ötesi  bir çalışma ile karşınızdayız. Stil dosyalarındaki çalışmalar ile her geçen sene daha değişik örnekler  çıkaran kişiler zaman zaman düşüncelerini ve bilgilerini zorlayarak çok acayip işler başarabiliyorlar.

Bahsettiklerim bu örnek için değil aslında. Bir  önceki yazımız ve benzerleri hakkındaydı.  İlk bakışta çok zor ve karmaşık gibi  görünse de aslında oldukça basit  bir örnek ve orjinali 45 derece eğik bir konumdaydı. Birkaç ufak değişiklik yaparak dikey olarak kullanılabilir  hale getirdim. Sitenizin üst kısmında kullanmak için biraz daha değişiklik yapmanız gerek ama yan taraflarda kullanmak istiyorsanız pek bir değişiklik yapmanıza gerek yok. Olduğu gibi sitenize yerleştirebilirsiniz.

Bu örneğimiz tamamen Css kullanılarak yapılmış. En önemli özellikleri de rotate, skew  ve transform kullanılması ayrıca örnekte kullanılan renkler de çok güzel görünüyor. Turuncu, beyaz, siyah ve açık gri tonlarının birleşiminden oluşmuş.

Dört köşeli butonlardaki küçük ikonlar da resim değil ikonik fontlar kullanılarak yapılmış. FontAwesome (yeni sekmede açılır) sayfasından kendi siteniz için uygun ikonları seçip bu örneğe kolayca ekleyebilirsiniz.

Tek yapmanız gereke <li> </li>  arasındaki <i ile başlayan yere linkteki ikonlardan birini eklemek.

Örnek kod, burada icon-recorder kullanılmış.

İkon ve reset.css adresleri:

 

Stil dosyası:

Html:

 

Aranan kelimeler:

  • mintik com vertical navigation
1 oy (6 votes, average: 4,83 out of 5)
Loading...
Önceki İçerikBu kadarına da pes!
Sonraki İçerikWeb fonts Türkçe font bulucu
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here