× İletişim Formu Blogger CSS Modal Arlina Design 6/01/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:20px 20px 0 20px;} .btn{background:#4caf50;color:#fff;padding:.5rem 1rem;display:inline-block;text-decoration:none;border-radius:.2rem;transition:.2s} .btn:hover{background:#009688} body.stop-scrolling{height:100%;overflow:hidden} .awesome-overlay{display:none;background:rgba(0,0,0,.5);position:fixed;top:0;bottom:0;left:0;right:0;z-index:998;overflow:hidden;animation:showOverlay .2s forwards} .awesome-modal{display:none;background:#fff;padding:1rem;width:450px;max-width:80%;z-index:999;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;box-shadow:0 0 26px 0 rgba(0,0,0,.2);border-radius:2px;-webkit-animation:showModal .3s 0s forwards;animation:showModal .3s 0s forwards} .modal-times{} .close-modal{position:absolute;top:0.5em;right:0;color:#d6d6d6;cursor:pointer;text-align:right;width:30px;height:30px;} .close-modal.black::before,.close-modal.black::after{height:8px;margin-top:-4px} .close-modal::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} .close-modal::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} .close-modal::before,.close-modal::after{content:'';position:absolute;height:3px;width:40%;top:50%;left:0;margin-top:-1px;background:#d6d6d6} .awesome-modal h1,.awesome-modal h2,.awesome-modal h3,.awesome-modal h4{margin-top:0} .hide-modal{-webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards} .hide-overlay{-webkit-animation:hideOverlay .2s forwards;animation:hideOverlay .2s forwards} @-webkit-keyframes showOverlay{0%{opacity:0}100%{opacity:1}} @keyframes showOverlay{0%{opacity:0}100%{opacity:1}} @-webkit-keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}} @keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}} @-webkit-keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}} @keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}} @-webkit-keyframes hideOverlay{0%{opacity:1}100%{opacity:0}} @keyframes hideOverlay{0%{opacity:1}100%{opacity:0}} :target,:target ~ .awesome-overlay{display:block} .awesome-modal:target{/* -webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards;*/} a.awesome-overlay{cursor:default} </style> </head> <body> <a href="#modal1" class="btn awesome-modal-trigger">Modal aktive 1</a> <a href="#modal2" class="btn awesome-modal-trigger">Modal aktive 2</a> <a href="#modal3" class="btn awesome-modal-trigger">Modal aktive 3</a> <div class="awesome-modal" id="modal1"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 1</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <div class="awesome-modal" id="modal2"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 2</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <div class="awesome-modal" id="modal3"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 3</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <a href="#" class="awesome-overlay"></a> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Modal" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Modal Arlina Design 6/01/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:20px 20px 0 20px;} .btn{background:#4caf50;color:#fff;padding:.5rem 1rem;display:inline-block;text-decoration:none;border-radius:.2rem;transition:.2s} .btn:hover{background:#009688} body.stop-scrolling{height:100%;overflow:hidden} .awesome-overlay{display:none;background:rgba(0,0,0,.5);position:fixed;top:0;bottom:0;left:0;right:0;z-index:998;overflow:hidden;animation:showOverlay .2s forwards} .awesome-modal{display:none;background:#fff;padding:1rem;width:450px;max-width:80%;z-index:999;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;box-shadow:0 0 26px 0 rgba(0,0,0,.2);border-radius:2px;-webkit-animation:showModal .3s 0s forwards;animation:showModal .3s 0s forwards} .modal-times{} .close-modal{position:absolute;top:0.5em;right:0;color:#d6d6d6;cursor:pointer;text-align:right;width:30px;height:30px;} .close-modal.black::before,.close-modal.black::after{height:8px;margin-top:-4px} .close-modal::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} .close-modal::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} .close-modal::before,.close-modal::after{content:'';position:absolute;height:3px;width:40%;top:50%;left:0;margin-top:-1px;background:#d6d6d6} .awesome-modal h1,.awesome-modal h2,.awesome-modal h3,.awesome-modal h4{margin-top:0} .hide-modal{-webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards} .hide-overlay{-webkit-animation:hideOverlay .2s forwards;animation:hideOverlay .2s forwards} @-webkit-keyframes showOverlay{0%{opacity:0}100%{opacity:1}} @keyframes showOverlay{0%{opacity:0}100%{opacity:1}} @-webkit-keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}} @keyframes showModal{0%{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)}45%{-webkit-transform:translate(-50%,-50%) scale(1.05);transform:translate(-50%,-50%) scale(1.05)}80%{-webkit-transform:translate(-50%,-50%) scale(0.95);transform:translate(-50%,-50%) scale(0.95)}100%{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}} @-webkit-keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}} @keyframes hideModal{0%{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}100%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(.7);transform:translate(-50%,-50%) scale(.7)}} @-webkit-keyframes hideOverlay{0%{opacity:1}100%{opacity:0}} @keyframes hideOverlay{0%{opacity:1}100%{opacity:0}} :target,:target ~ .awesome-overlay{display:block} .awesome-modal:target{/* -webkit-animation:hideModal .2s forwards;animation:hideModal .2s forwards;*/} a.awesome-overlay{cursor:default} </style> </head> <body> <a href="#modal1" class="btn awesome-modal-trigger">Modal aktive 1</a> <a href="#modal2" class="btn awesome-modal-trigger">Modal aktive 2</a> <a href="#modal3" class="btn awesome-modal-trigger">Modal aktive 3</a> <div class="awesome-modal" id="modal1"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 1</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <div class="awesome-modal" id="modal2"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 2</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <div class="awesome-modal" id="modal3"> <a href="#"><span class="close-modal"></span></a> <h3>Modal 3</h3> <p><b>Çocuğunuzla Konuşmak Sorunları Çözer mi?</b> <br><br> Çocukların yaşadığı sıkıntıları sezebilen ailelerin çocukları zararın başından dönebilir.</p> <a href="#" class="btn modal-close">Tamam</a> </div> <a href="#" class="awesome-overlay"></a> </body> </html>
Yorum Gönder