× İletişim Formu Blogger CSS Modal 2 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=Raleway:400,100,700); body {font-family:'Fira Sans Condensed', sans-serif;margin:0 auto 0 auto;background:#e6e6e6;} *{margin:0;padding:0;box-sizing:border-box;font-family:"Raleway"} input{display:none} label.modal-btn{color:#fff;background:#f0c36d;cursor:pointer;padding:0 16px;font-weight:700;line-height:32px;margin:32px;display:block;text-align:center;width:200px} label.modal-btnlabel.modal-btn:hover,label.modal-btn:active,label.modal-btn:focus{background:#0288D1} .modal{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-width:300px;width:50%;background:#eee;box-shadow:0 0 3px rgba(0,0,0,.3);-webkit-filter:blur(100px);filter:blur(100px);-webkit-transition:all 0.2s cubic-bezier(0,0,0.32,1);transition:all 0.2s cubic-bezier(0,0,0.32,1);visibility:hidden;opacity:0;color:#333;padding-bottom:16px} .modal h1{font-weight:100;background-color:#03A9F4;padding:16px;color:#fff;margin:0} .modal h1 label{cursor: pointer;float:right;margin:0;width:15px;line-height:30px;font-size:50px;font-weight:100;top:0;right:0} .modal p{padding:24px} .modal p + p{padding-top:0} .modal label{margin:0 auto;color:#fff} input:checked ~ .modal{-webkit-filter:none;filter:none;visibility:visible;opacity:1} </style> </head> <body> <input type="checkbox" id="toggle" checked /> <label class="modal-btn" for="toggle">Toggle modal</label> <div class="modal"> <h1>CSS Modal <label for="toggle">×</label></h1> <p>Simple CSS only modal transition effect made using <em>input:checked</em> trick and filter property.</p> <p>I was also curious how things would behave if I set multiple labels for one checkbox.</p> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Modal 2" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Modal 2 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=Raleway:400,100,700); body {font-family:'Fira Sans Condensed', sans-serif;margin:0 auto 0 auto;background:#e6e6e6;} *{margin:0;padding:0;box-sizing:border-box;font-family:"Raleway"} input{display:none} label.modal-btn{color:#fff;background:#f0c36d;cursor:pointer;padding:0 16px;font-weight:700;line-height:32px;margin:32px;display:block;text-align:center;width:200px} label.modal-btnlabel.modal-btn:hover,label.modal-btn:active,label.modal-btn:focus{background:#0288D1} .modal{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-width:300px;width:50%;background:#eee;box-shadow:0 0 3px rgba(0,0,0,.3);-webkit-filter:blur(100px);filter:blur(100px);-webkit-transition:all 0.2s cubic-bezier(0,0,0.32,1);transition:all 0.2s cubic-bezier(0,0,0.32,1);visibility:hidden;opacity:0;color:#333;padding-bottom:16px} .modal h1{font-weight:100;background-color:#03A9F4;padding:16px;color:#fff;margin:0} .modal h1 label{cursor: pointer;float:right;margin:0;width:15px;line-height:30px;font-size:50px;font-weight:100;top:0;right:0} .modal p{padding:24px} .modal p + p{padding-top:0} .modal label{margin:0 auto;color:#fff} input:checked ~ .modal{-webkit-filter:none;filter:none;visibility:visible;opacity:1} </style> </head> <body> <input type="checkbox" id="toggle" checked /> <label class="modal-btn" for="toggle">Toggle modal</label> <div class="modal"> <h1>CSS Modal <label for="toggle">×</label></h1> <p>Simple CSS only modal transition effect made using <em>input:checked</em> trick and filter property.</p> <p>I was also curious how things would behave if I set multiple labels for one checkbox.</p> </div> </body> </html>
Yorum Gönder