Font Awesome ile hazırlanmış mp3 player tasarımı

0
177
views

mp3 player
İlk bakışta bunun bir mp3 player  olduğunu zannedebilirsiniz. Ama tahmin ettiğiniz gibi bu bir mp3 player örneği değil maalesef. Tabi ki biraz uğraşarak html5 audio elementi için kullanabilirsiniz. Yalnız dediğim gibi bir mp3 çalar değil. Tasarım açısından oldukça başarılı ve güzel görünen bir örnek. Kendinize  göre  düzenleyip değişik  uygulamalarda kullanmak isterseniz  bence bin bir türlü değişik tasarım örneği yapabilirsiniz bununla.

Bir online  mağazanız var ve mouse ürün resminin  üzerine geldiği anda ürün resmi kaysın ve arkasından fiyat etiketi yada sepete ekle bölümleri olsun istiyorsanız bu örneği özelleştirerek kendi sitenize uygun hale getirebilirsiniz. Sadece online alış veriş siteleri için kullanılacak diye bir kaide yok. Aklıma ilk online mağazalar geldiği için böyle söyledim. Kişisel blog sitenize de  uyarlayabilirsiniz. Mouse üzerine gelince resim kaysın arkasında devamını oku linki çıksın yada sosyal paylaşım ikonları çıksın gibi tasarımlarda da kullanabilirsiniz.

Jean Baptiste tarafından hazırlanmış olan bu örnekte Css3 ve jQuery kullanılmış. Mp3 player ikonları da Font Awesome’den alınmış. Css3 ile  bu örnekte perspective değeri kullanılmış. Mouse cd resminin üzerine geldiğinde 3D şeklinde katlanması için. Webkit destekli tarayıcılarda sorunsuz bir şekilde çalışıyor. Webkit desteklemeyen tarayıcılar da ise Css margin kullanılmış cd resmi sola kaysın diye. Bildiğiniz  gibi en dandik tarayıcılar bile margin destekliyor.

Mp3 playerdeki butonlara tıkladığınızda adeta gerçekmiş gibi butonlar içeri batıyor ve duruyor. Tekrar tıkladığınızda butanlar eski haline geliyor. Tıklandığında butonun içeride basılı halde durmasını  sağlamak için de jQuery Toggle kullanılmış. Bu sayede jQuery Togglenin ne olduğunu bilmeyenler öğrenmiş oldular.

 Kullanım

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

Js Css dosya  adresleri : 

 JavaScript : 

 Css : 

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

Html : 

WebKit Tarayıcıları İçin

 Bütün Tarayıcılar İçin

 

CEVAP VER

Please enter your comment!
Please enter your name here