Simple vertical deisgn – fadeIn fadeOut

0
245
views

parlak-oval

Görünüş olarak basit olsada  oldukça şık görünüyor bana göre. Oval köşeleri, mouse üzerine geldiğinde yavaşça renk değiştirmesi, butonların arka planında bulunan gölgenin parlaması ve buton linklerindeki başlıkların arkasında duran gölge efekti. Aslında ilk bakıldığında bir menüyü andırıyor olsa da linkler tek tek kullanıldığında buton örneğinden başka bir şey değildir. bu seferlik sizlere biraz değişik bir örnek sunmak istediğimden dolayı böyle bir tasarım karşımıza çıktı. Ayrıca yatay menü örneklerinin en vazgeçilmez özeliği olan drop&down yani açılır kapanır alt linklerin bu örnekte olmaması biraz daha da kötü olmuş diyebilirim. Yine de alt linkler kullanmayan birilerinin işine yarar diye paylaşmak istedim. Hem Css3 tarzı pek örnk bulunmuyor her yerde. Olanları da ihtiyacımızı karşılamakta bazen bir dilim eksik kalabiliyor. Bir zamanlar internette iyi veya kötü bütün örnekleri elimin altında tutardm sırf bazen kendi başıma çabalamak ve bir şeyler yapmak için.

Başlıklarda text-shadow, buton çerçevelerine border-radius + box shadow be butonların renginde de linear-gradient kullanılmış. Son olarak ta mouse üzeirne geldiğinde hafifçe renk değiştirme olayında da jQuery fadeIn ve FadeOut kullanılmış. Aslında transitions (geçişler) kullanılarak ta yapılabilirdi. Maksat biraz değişiklik olsun. Hem ne kadar çok özellik olursa bilmeyen arkadaşlarımızın işine daha çok yarayacak diye düşünüyorum.

Kullanım

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

Css :

 Eğer  demodaki gibi jQuery ile beraber kullanmak isterseniz aşağıdaki kodlarıda ekleyin. Butonlara fade  efekti  (yavaşça renk değiştirme) sağlayacaktır.

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

Html : 

class”secili” kodunu ekleyeceğiniz  buton mouse  üzerindeymiş gibi  bir görüntüye  sahip.  Bu tür menülerle mutlaka karşılaşmışsınızdır. Eğer  nasıl kullanıldığını bilmiyorsanız  burada benzer  bir menüde  kullanımı hakkında açıklamada  bulundum. Okuyup inceleyebilirsiniz.

1 oy (No Ratings Yet)
Loading...
Önceki İçerikThemify
Sonraki İçerikMacolinis
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş