Solda gizli fotoğraf çerçevesi

0
357
views

gizli

Dün 3D görünümlü  bir  hover efekti paylaşmıştık sizlere. Dünkü yazıda asıl yapmak istediğim  3D küp  şeklinde  bir menü  olduğunu da belirtmiştim. Bugün yine  3D küp şeklinde menüyü sizlerle paylaşmak kısmet olmadı çünkü yine yapmadım 😀 Bir daha ki sefer eğer  aklıma başka bir tasarım  gelmezse  yapıp  sizlerle paylaşacağımdan şüpheniz olmasın.

Bunu hazırlamadan önce ana ekranda perspective ile yan görünen bir çerçeve içerisine resimler  ekleyip mouse çerçeve içine girdiği anda düz bir  görünüme geçen bir galeri hazırlamayı düşünüyordum. Fikir buradan çıktı  ama  sonuç olarak sayfada  görünmeyen bir  galeri geldi.  Bu galeriyi  hazırlayana kadar  üç yada dört farklı tasarım hazırlayıp  yarıda kestikten sonra  ortaya böyle bir galeri çıktı. Tam anlamıyla resim galeri değil de resim kategorilerini  andırıyor.  Resimlerin altında  bulunan başlıkları silerseniz  tamamen  resim galeri gibi görünecektir.

Sayfada gizlenmiş  resim galerisi  yapmak için evvela  sayfanın en solunda  görünmeyen bir panel ekledim. Sanırım 10px genişliğinde  ve 500px  uzunluğundaydı. Bu panelin kendisi  sayfada  var  ama  arka plan rengi  olmadığı için görünmüyor. Mousenizi sayfanın en soluna getirdiğinizde soldan sağa doğru bir  ikon çıkıyor. İkona tıkladığınızda resimlerin olduğu çerçeve  soldan sağa  doğru 3D  şeklinde  açılıyor. Tekrar  ikonu tıkladığınızda  resimlerin olduğu çerçeve sola doğru 3D şeklinde kapanıp kayboluyor. Chrome, Opera, Safari ve Mozilla  tarayıcılarında  bu işlem sırasında herhangi bir  sorun yok. Perspective gayet güzel çalışıyor. Gözünü  sevdiğim Internet Explorer’i  hala  eski havalarda takıla dursun. Birçok sitede ve Microsoft’un kendi sitesinde dahi -ms-transitions ve -ms-transform-origin IE10 tarafından destekleniyor  demelerine  rağmen kendim  canlı  olarak şahit olamadım  çalıştığına. Yine de  ne olur ne olmaz diye  diğer  tarayıcılar  için kullandığım ayarları IE  için de ekledim. Olur da IE  bir değişiklik yaparsa  geri dönüp  örnekleri tekrar tekrar düzeltmemek için. Büyük ihtmal IE11  üzerinden incelediğinizde  herhangi bir sorun ile karşılaşmayacaksınız ama bir önceki sürümleri kullanıyorsanız eğer herhangi bir  geçiş özelliği olmadan tıklandığında birden açılıp birden kapanan bir  galeri göreceksiniz.

Sol taraftan çıkan  küçük ikonun üzerine  mouse geldiği an panelin açılmasını  ayarladım ilk başta. Bu da resimleri inceleme konusunda  biraz  sıkıntı  yapacağı için mecburen input  kullanmak zorunda  kaldım. Sol taraftan çıkıp  tıkladığınızda resim galeri çerçevesinin açılmasını  sağlayan ikon  aslında  bir inputtan ibaret. Mouse  üzerine geldiğinde  açılmasını istiyorsanız  eğer Html kodlardan ve Css kodlardan input özelliğini kaldırıp normal  hover  kullanmanız gerekiyor.

Dünkü  paylaştığım çalışma mouse resimlerin üzerine geldiği  an resimler geriye doğru yan yatıyordu ve üstten  ışık vuruyormuş gibi  bir  efekt  ortaya çıkıyordu. Herhangi bir ışık vurmuyordu aslında. Resmin arka planını beyaz olarak ayarlamıştım ve hover  efektinden sonra da  resim yarı yarıya saydamlaşıyordu. bu sayede  böyle bir görüntü ortaya çıkıyordu. Bu günkü çalışmamızda da aynı özellik var  ama  resimler  sabit olarak duruyor. Mouse resimlerin üzerine geldiğinde resim saydamlaşıyor ve beyaz olan arka plan rengi resim ile iç içeymiş gibi görünüyor.

Gördüğünüz  gibi  sadece  perspective kullanarak  binlerce  tasarım hazırlanabilir. Yeter ki aklınızdan bir şeyler  tasarlayın ve yapmaya  çalışın.  Sanırım bir sonraki yazı da yine bir resim galeri örneği paylaşacağım sizler ile. Bir önceki yazımızdan pek farklı olmayan özelliğe sahip ama  görüntü ve çalışma şekli olarak biraz farklı olacak.

Kullanım

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

Css :

 

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

 

Html :

CEVAP VER

Please enter your comment!
Please enter your name here