CSS teknikleri kullanılarak animasyonlu menü hazırlamak

CSS teknikleri kullanılarak animasyonlu menü hazırlamak
20,416 Gösterim

Fatih Toprak Profilleri

Fatih Toprak Fatih Toprak'a
sosyal medya hesapları üzerinden
ulaşabilirsiniz. Kimdir ?

Bu şekilde paylaşılan hazır kodlar gayet güzel ve yararlı oluyor yer yer projelere göre. Hem benim için de bir şekilde online olarak sakladığım data bank yerine de geçiyor diyebilirim. Yan taraftaki arama kısmı her ne kadar sağlıklı olarak çalışmasa da zaman zaman ben aradıklarımı kendi sitemde dahi bulamasam da üstteki detaylı arama kısmından çözüme erişiyorum. Sizlerde o şekilde yapabilirsiniz.

Önizleme.Dosyaları indir.

Bu ipucu yazısında sizler ile CSS3 tekniklerini kullanarak , Rolling animasyonu sayesinde olduğundan daha havalı olabilecek bir menü örneği hazırlamış olduğum demo vasıtası ile daha hareketli olarak CSS3 query’leri kullanımı hedeflediğim dönemlerde ürettiğim / bulduğum / edindiğim tecrübeleri bir yandan da sizlere örnek uygulama olarak hazırlayıp sunmuş olacağım.  Yakın gelecekte wpkepp adındaki beni çok heyecanlandıran bir proje ile de tamamen artık kişisel blogum üzerinden fazla wordpress yazısı yazmayacağımın mümkünse, tamamen wpkeep üzerinden devam edeceğiminde duyurusunu kısaca üstü kapalı olarak buradan belirtmek isterim. Kısa zamanda proje ile de alakalı zaten detayları yazıyor olacağım. Gelelim asıl konumuza; CSS3 kullanarak nasıl animasyonlu menü hazırlamışız. Buyrun bakalım…

POZRolling CSS Menü nasıl hazırlanır ?

Ben menüye efektinden ötürü bu şekilde bir isim vermiş oldum. O nedenle altta buna benzer tanımlamalar gördüğünüzde nedir bu durumundan evvel açıklama gereksimi hissettim. HTML 5 yapısı ile de bütünleştirip, CSS3 queryleri sayesinde enfes bir uygulama çıktısı aldım diyebilirim. Şu adresten demoyu görebilirsiniz.  Bu iki basit CSS3 tanımlaması ile çalışmanıza efekt vererek menüyü daha gösterişli hale sokmuş olacaksınız.

Kısaca kullandığımız betiklere göz atacak olursak ; kurguladığımız uygulamada, ul değerleri ve li değerleri için CSS3 efekt özelliğinden yararlanmış olduk . Kısaca sizlerde ; kaynak dosyayı indirip, veya demodan ul ve li tagleri için yazmış olduğum satırları kendi projenize dahil edip, kullanarak menülerinizi biraz olsun hareketlendirebilirsiniz. CSS3 transations ile alakalı detaylı bilgiye ise şu adresten ulaşabilirsiniz.

Yakın gelecekte daha fazla CSS3 örnekleri hakkında yazıyor ve kaynak kodlu uygulamaları paylaşıyor olacağım. Takipte kalın.

  • Anonimbahadır aköam: Merhabalar. Asus x552e modeli aldım.Amd E1 işlemci ve Windows 8.1. MEdiamartk a işin de uzman arkadaşlar benim ihtiyacım olan internete girmek ve video falan izlemek için fazlasıyla iş görece...
  • Anonimyavuz demir: cd && rm -rf /tmp/pagespeed gibi gözüken kod hatalı çıkmış: cd && rm -rf /tmp/pagespeed olması gerekiyor galiba....
  • AnonimFatih Toprak: site adresiniz nedir ? ben bir imceleyyeim....
  • Anonimgökhan köle: konsol nasıl acılıyor acaba opera kullanıyorum?...
  • AnonimFatih Toprak: Lütfen kullandığınız tarayıcının konsol hatasını paylaşır mısınız http://prntscr.com/5eidky...

Bu içerik için henüz hiç kimse görüş bildirmemiş. İlk olarak siz yorum yazamaya ne dersiniz ?

Fatih'in daha fazla yazı yazması için yorumlayın ;)

Yorum yazmadan önce, bir kaç detay:
1- Yorumlarınıza kod örnekleri eklemek istiyorsanız; <pre lang="php">Kodlarınızı buraya yazınız</pre> şeklinde girdilerinizi oluşturunuz.
2- Hiç bir web sitesi linkini çıkış olarak tanımlamadığımdan, boşu boşuna reklam kokan yorumlar yapıp zamanınızı çalmayınız.
3- Usulüne uygun eleştiri yapmanız mümkün ancak hakarete varan saçma yorumlar yapmadan efendiliğinizi koruduğunuz sürece her yorum yayınlanacaktır, bilmelisiniz.
4- Doğru posta adresi, ad soyad yazmanız gerekir ki yorumlqrı yorumlayan kişiye olan hitap şeklimiz saçma olmasın, şayet ulaşılası durumlarda mailleşebilmemiz gerekebilir.
5- Yorum ekleme esnasında, eklediğiniz mail adresinizi spam vb. gibi promosyon içerikli maillerle şişirip canınızı sıkmayacağımı, başkaları ile paylaşmayacağımı da CC yasaları gereği gizlilik ve kullanım sayfasında açıkladım, buradan inceleyebilirsiniz.

Konu başlıkları : Web Tasarımı - Wordpress