16 Ocak 2014 Perşembe

CSS Kodu İle Açılır Pencere Yapabilir Miyim?


 Lightbox olarak da adlandırılan açılır pencereler, aslında javascript ve hatta bazı durumlarda ajax kullanılarak hazırlanır. Yine de sadece css kullanılarak açılır pencereler oluşturulabilir.

 Bunun için css hack kullanmanız gerekir. İllegal bir yanı olmayan, yalnızca css kodlamalarının yaratıcı yöntemler izlenerek kullanılması anlamını taşıyan css-hack tekniğini açılır pencerelere uygulamak için, css seçicilerdeki :target veya :checked yardımcı seçicileri kullanmanız gerekir. Bu yardımcı seçicilerin açılır pencerenin açılmasında ve kapanmasında görev almasını sağlamalısınız.

 İnternette sadece css ve html kullanılarak hazırlanmış sadece iki açılır pencere kodlaması bulunmakta. Bunlardan ilki, aslında oldukça kullanışsız olan "FutureBox". Ancak bu kodlama, sadece tıklanan resimleri büyük pencerede göstermek için dizayn edilmiş ve tüm tarayıcılarla uyumlu değil. Ekranın herhangi bir yerine tıklandığında da pencere kapanıyor.

 Eğer gerçekten javascript kulanmayan, css ve html ile hazırlanmış bir açılır pencere kodlaması istiyorsanız, Kod Dostu Javascriptsiz Açılır Pencere Kodunu gözden geçirmeniz gerekir. Bu kodlamadaki açılır pencerenin kodlanabilmesi için, input ve label öğelerinin kullanıldığı bir css hack tekniği hazırlanmış. Bu adreste bulabileceğiniz açılır pencereler klasik açılır pencerelere kıyasla bir dezavantaja sahip değil, hatta pencereler açılış animasyonu bile içeriyor. Aksine, javascript bulundurmadığı için, sayfa yüklenmesini yavaşlatmama avantajına sahip olduğu söylenebilir.

x
x Bir Saniye!

Siteyi terk edecek gibi görünüyorsun.

Yeni yayınlardan haberdar olmak için facebook sayfamızı takip etmek isteyebilirsin.

İlgini çekebilecek birkaç şey daha var. Hemen göz atmak için anasayfa'ya uğrayabilirsin:

Facebook'a Git Anasayfa'ya Git