Menü örneğimiz sayfasnın sol tarafında sabit duruyor ve mouse ile ok işaretine tıklandığında adeta ikiye katlanmış bir kağıt parçasının düzelmesi gibi bir efekte sahip. Mouse ile ok işaretine tekrar tıkladığımızda menü örneği tekrar ikiye katlanıp sayfanın sol tarafında kayboluyor ve sadece ok işaretleri kalıyor.
Neler oluyor?
Rhino
Sebastian Pontow tarafından geliştirilen RhinoSlider eklentisi websitenize çok kolay bir şekilde entegre edebileceğiniz slayt galeri bölümleri oluşturmanıza olanak sağlar. Eklenti her ne kadar diğer slayt örneklerine benzesede az çok farklılıkları var bunun yanında eklentinin bütün özelliklerini kullanabilmeniz için tamamen öğrenmenize gerek yok. Çünkü İstediğiniz slayt örneğini kendiniz belirliyorsunuz.
360 derece Canvas ürün görüntüleyici
Daha önceleri bunun bir benzeri olan Threesixty-slider diye bir jQuery eklentisi paylaşmıştık. Şimdiki demo da aynı özellikte. Html5 ve Canvas kullanılarak hazırlanmış olan bu örnek toplamda otuz adet resimden oluşuyor ve sayfa yüklenme işlemi bittikten sonra 360 derece olarak ekrandaki htc telefonu dönüyor. Mousenizi sol tıklayıp sürüklediğiniz zaman yine aynı şekilde... Devamını oku →
Takipçi sayısını gösteren sosyal profil tasarımı
Şimdiye kadar görmeye alışık olduğumuz sosyal medya ikonlarının çok farklı bir örneğini inceliyorsunuz. Daniel Herrera tarafından jQuery ve Css3 kullanılarak hazırlanmış olan bu sosyal medya örneğinde mouse ikonların üzerine geldiğinde ikonların arkaplanı kırmızı renk oluyor ve beğen bölümü de aşağı kayarak kaç kişinin sayfayı beğendiğini yada takip ettiğini gösteriyor
Beatiful animated buttons
Web sitenizde kullanabileceğiniz animasyonlu buton örneği. Sazzad Hossain tarafından hazırlanmış bu buton örnekleri mouse üzerine geldiğinde başlıklar görünüyor ve butonlardaki ikonlar biraz daha yaklaşıp daha büyük bir halle geliyor
StackImage
Resim galerilerinizde kullanabileceğiniz kullanışlı ve bir o kadarda güzel css3 resim galeri örneği. Sazzad Hossain tarafından hazırlanan fotoğraf galerisi örneğinde Css3 geçişler ve dönüşümler kullanılmış. Bütün resimler hafif bir şekilde üst üste yığılmış ve herbiri ayrı bir şekilde döndürülmüş. Mouse ile üzerine geldiğiniz siyah beyaz resim yavaşça düzeliyor
Çerçevelerin altına yassı gölge efekti ekleme
Resimleriniz yada Css çerçeveleriniz için kullanabileceğiniz 3D gölge efekti. Css3 skew, rotate ve box shadow gibi özellikler kullanılarak hazırlanmış olan bu örnekte çerçevelerinizin şekli oval bir görünüme kavuşuyor. Galeri resimleri için hazırlanmış olsada aklınıza gelebilecek her yerde kullanabileceğiniz bir örnektir..
Tıklandığında içeri batan buton tasarımı
Sadece Css kullanılarak hazırlanmış olan bu buton örnekleri 3D görünümde tıklanabilir özelliğe sahip. Kullanımı oldukça kolay ve isterseniz örneklere seçili (active diye yazılmış css içinde ) sınıfını atayarak hangi butonların tıklanmış olduğunuda belirleyebiliyorsunuz. Active özelliği; ziyaretçinin tıkladığı butonun veya incelediği sayfanın tıklanmış bir şekilde durmasını sağlayan özelliktir.
Bootstro.js – Fb benzeri yeni tasarım tanıtma
Bootstro Steve Tran tarafından web sitesi içindeki bölümleri aşama aşama kullanıcıya tanıtmak amacıyla geliştirilmiş bir jQuery uygulamasıdır. Sanırım hemen hemen herkesin facebook üzerinden mutlaka karşılaştığı bir özelliktir bu. Facebook yeni sürümlere geçtiği zaman kullanıcılarına yeni sürümle beraber gelen özellikleri tanıtmak için bu tür örnekler kullanır genelde.