× İletişim Formu Basit CSS Modal Kutusu Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto 0 auto} a {text-decoration: none;outline: none;transition: all 0.25s;} .modal-box{z-index:9} .modal-box__overlay{position:fixed;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:opacity 0.1s ease-in;-moz-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;cursor:default} .modal-box__content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:800px;padding:20px;background:#fff;opacity:0} .modal-box:target .modal-box__overlay,.modal-box:target .modal-box__content{opacity:1;visibility:visible} .modal-box--close{background:#606061;color:#ffffff;height:30px;line-height:30px;position:absolute;right:-15px;top:-15px;padding:0 10px} </style> </head> <body> <a href="#modal-box--open">Modal Kutusunu Aç</a> <div id="modal-box--open" class="modal-box"> <a href="#modal-box--close" class="modal-box__overlay"></a> <div class="modal-box__content"> <a href="#modal-box--close" class="modal-box--close">Kapat</a> <h2>Modal Kutusu</h2> <p>Bir teknoloji ürünü dengeli kullanıldığında, çocukların etkili iletişim becerilerinin gelişmesine ve sizinle iletişimine katkıda bulunabilir.</p> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Basit CSS Modal Kutusu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Basit CSS Modal Kutusu Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;margin:0 auto 0 auto} a {text-decoration: none;outline: none;transition: all 0.25s;} .modal-box{z-index:9} .modal-box__overlay{position:fixed;top:0;right:0;bottom:0;left:0;visibility:hidden;opacity:0;background:rgba(0,0,0,0.8);-webkit-transition:opacity 0.1s ease-in;-moz-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;cursor:default} .modal-box__content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:800px;padding:20px;background:#fff;opacity:0} .modal-box:target .modal-box__overlay,.modal-box:target .modal-box__content{opacity:1;visibility:visible} .modal-box--close{background:#606061;color:#ffffff;height:30px;line-height:30px;position:absolute;right:-15px;top:-15px;padding:0 10px} </style> </head> <body> <a href="#modal-box--open">Modal Kutusunu Aç</a> <div id="modal-box--open" class="modal-box"> <a href="#modal-box--close" class="modal-box__overlay"></a> <div class="modal-box__content"> <a href="#modal-box--close" class="modal-box--close">Kapat</a> <h2>Modal Kutusu</h2> <p>Bir teknoloji ürünü dengeli kullanıldığında, çocukların etkili iletişim becerilerinin gelişmesine ve sizinle iletişimine katkıda bulunabilir.</p> </div> </div> </body> </html>
Yorum Gönder