Javascriptsiz Açılır Pencere Kodu (Sadece Burada) by Kod Dostu on 1/16/2014 10:21:00 ÖÖ açılır pencere, css lightbox, css only, css3, javascriptsiz açılır pencere, kod dostu, lightbox, pencereler adfxq yayınaef son ..xva baslikntd urlname Reklam DÜNYADA BİR İLK! Javascriptsiz, sadece html ve css kullanarak oluşturulmuş bir açılır pencere(lightbox)! Hangi platformu, hangi site oluşturma aracını kullanıyorsanız kullanın, sitenizde kesinlikle çalışacak bir kod! Javascript içermediği için, web siteniz kesinlikle yavaşlamayacak! Önizlemeyi Görmek İçin Tıklayın <!--Koddostu Javascriptsiz Açılır Pencere Kodu STOP--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif sahibi:koddostu.com--> <div id="pencerekodu"><label for="pencere" class="dugme"> Pencereyi Aç </label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere"> Pencere İçeriğini Bu Alana Yazabilirsiniz. <label for="pencere" class="dugme" name="kapat">Kapat</label></label></div> <style> .dugme{cursor:pointer;display:inline-block;padding:5px 10px;background:#eee;border:1px solid #d8d8d8;font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#444; -webkit-border-radius: 3px; border-radius: 3px; } [name="kapat"]{position:absolute;bottom:20px;right:20px;} .pencere{ position:fixed;top:-50%;left:-50%; width:380px;height:280px;background:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,0.4); opacity:0; transition:opacity 0.6s ease-out; z-index:-1; padding:10px; -webkit-border-radius: 3px; border-radius: 3px; margin:-150px 0 0 -200px; } .Pencereac{width:1px;height:1px;visibility:hidden;} .Pencereac:checked + .pencere{ top:50%;left:50%; display:block; z-index:9; opacity:1;}</style> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif sahibi:koddostu.com--> <!--Koddostu Javascriptsiz Açılır Pencere Kodu START--> <!--Koddostu Javascriptsiz Açılır Pencere Kodu STOP--> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif sahibi:koddostu.com--> <div id="pencerekodu"><label for="pencere" class="dugme"> Pencereyi Aç </label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere"> Pencere İçeriğini Bu Alana Yazabilirsiniz. <label for="pencere" class="dugme" name="kapat">Kapat</label></label></div> <style> .dugme{cursor:pointer;display:inline-block;padding:5px 10px;background:#eee;border:1px solid #d8d8d8;font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#444; -webkit-border-radius: 3px; border-radius: 3px; } [name="kapat"]{position:absolute;bottom:20px;right:20px;} .pencere{ position:fixed;top:-50%;left:-50%; width:380px;height:280px;background:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,0.4); opacity:0; transition:opacity 0.6s ease-out; z-index:-1; padding:10px; -webkit-border-radius: 3px; border-radius: 3px; margin:-150px 0 0 -200px; } .Pencereac{width:1px;height:1px;visibility:hidden;} .Pencereac:checked + .pencere{ top:50%;left:50%; display:block; z-index:9; opacity:1;}</style> <!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif sahibi:koddostu.com--> <!--Koddostu Javascriptsiz Açılır Pencere Kodu START--> Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: