“Bazı şeylerin gitmesine izin vermek işte bu nedenle çok önemlidir. Onları serbest bırakmak. Gevşek olanı kesmek. İnsanların hiç kimsenin işaretli kağıtlarla oynamadığını anlaması gerekiyor; bazen kazanırız ve bazen kaybederiz. Hiçbir şeyi ger almayı bekleme, yaptıkların için takdir edilmeyi bekleme, ne kadar zeki olduğunun keşfedilmesini bekleme ya da aşkının anlaşılmasını. Daireyi tamamla. Gururlu, yetersiz ya da kibirli olduğun için değil, sadece artık onun senin yaşamında yeri olmadığı için. Kapıyı kapat, plağı değiştir, evi temizle, tozdan kurtul. Geçmişte olduğun kişi olmayı bırak ve şu an kimsen o ol.”
by Paulo Coelho - Zahir S. 204

Css ile Su Damlası Menüsü (Water Wave Menu)

Tarih: Şubat 4th, 2011 | Yazar: | Kategoriler: Css | Etiketler: | 4 Yorum »

Geçen gün cep telefonumda Need for Speed Hot Pursuit oynarken navigasyon menüsü dikkatimi çekti. Menüdeki herhangi bir butona tıkladığımızda bir su birikintisine, bir damla düşmüş gibi arkasında dalgalar bırakıyordu. Bu şekilde bir menüyü acaba sadece CSS kullanılarak yapılmış mıdır diye kısa bir araştırma yaptım ama herhangi bir sonuca ulaşamadım.

Yapılmış herhangi bir örnek bulamayınca kendim yapmaya karar verdim.

Menüyü şu adımları izleyerek oluşturdum;

  • Öncelikle yüksek border-radius değerleri ile ile yuvarlak halkalar elde ettim.
  • En üste menü elamanın kendisini z-index değerlerini ayarlayarak yerleştirdim. Bunu altına ise dalga efektini verecek elementleri ilave ettim.
  • Son olarak mouse, menü elemanlarının üzerine geldiğinde CSS’in transition özelliğini kullanarak animasyon şeklinde alta kalan halkaları genişlettim. Tabi halkalar genişlerken bulundukları konumu kaybettikleri için aynı anda top ve left değerlerini de uygun bir şekilde yine CSS transition özelliği ile ayarladım.

Sadece Chrome ve Safari de çalışıyor. Buradan test edebilir buradan da indirebilirsiniz