× İletişim Formu Basit CSS Modal Arlina Design 6/01/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;padding:2rem;background-color:#2980b9;margin:0 auto 0 auto} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html,body{height:100%} .container{display:table;width:100%;height:100%} .interior{display:table-cell;vertical-align:middle;text-align:center} .btn{background-color:#fff;padding:1em 3em;border-radius:3px;color:#2980b9;text-decoration:none} .modal-window{position:fixed;background-color:rgba(255,255,255,0.5);top:0;right:0;bottom:0;left:0;z-index:999;opacity:0;pointer-events:none;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s} .modal-window:target{opacity:1;pointer-events:auto} .modal-window>div{width:400px;position:relative;margin:10% auto;padding:2rem;background:#fff;color:#444} .modal-window header{font-weight:bold} .modal-close{color:#aaa;line-height:50px;font-size:80%;position:absolute;right:0;text-align:center;top:0;width:70px;text-decoration:none} .modal-close:hover{color:#000} .modal-window h1{font-size:150%;margin:0 0 15px} </style> </head> <body> <div class="container"> <div class="interior"> <a class="btn" href="#open-modal">Aç</a> </div> </div> <div id="open-modal" class="modal-window"> <div> <a href="#modal-close" title="Close" class="modal-close">Kapat</a> <h1>CSS Modal</h1> <div>Çocuğun ödevini yetişkin desteği olmadan yapabilmesi önemli ve ihtiyaç duyulan bir kazanımdır.</div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Basit CSS Modal" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Basit CSS Modal Arlina Design 6/01/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;padding:2rem;background-color:#2980b9;margin:0 auto 0 auto} *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html,body{height:100%} .container{display:table;width:100%;height:100%} .interior{display:table-cell;vertical-align:middle;text-align:center} .btn{background-color:#fff;padding:1em 3em;border-radius:3px;color:#2980b9;text-decoration:none} .modal-window{position:fixed;background-color:rgba(255,255,255,0.5);top:0;right:0;bottom:0;left:0;z-index:999;opacity:0;pointer-events:none;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s} .modal-window:target{opacity:1;pointer-events:auto} .modal-window>div{width:400px;position:relative;margin:10% auto;padding:2rem;background:#fff;color:#444} .modal-window header{font-weight:bold} .modal-close{color:#aaa;line-height:50px;font-size:80%;position:absolute;right:0;text-align:center;top:0;width:70px;text-decoration:none} .modal-close:hover{color:#000} .modal-window h1{font-size:150%;margin:0 0 15px} </style> </head> <body> <div class="container"> <div class="interior"> <a class="btn" href="#open-modal">Aç</a> </div> </div> <div id="open-modal" class="modal-window"> <div> <a href="#modal-close" title="Close" class="modal-close">Kapat</a> <h1>CSS Modal</h1> <div>Çocuğun ödevini yetişkin desteği olmadan yapabilmesi önemli ve ihtiyaç duyulan bir kazanımdır.</div> </div> </div> </body> </html>
Yorum Gönder