× İletişim Formu Blogger CSS Modal Kutusu Arlina Design 6/02/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:1%;font:1/1.5em sans-serif;text-align:center;margin:0 auto 0 auto} .modal{opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;background:rgba(0,0,0,.9);transition:opacity .25s ease} .modal__bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer} .modal-state{display:none} .modal-state:checked + .modal{opacity:1;visibility:visible} .modal-state:checked + .modal .modal__inner{top:0} .modal__inner{transition:top .25s ease;position:absolute;top:-20%;right:0;bottom:0;left:0;width:50%;margin:auto;overflow:auto;background:#fff;border-radius:5px;padding:1em 2em;height:50%} .modal__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .modal__close:after,.modal__close:before{content:'';position:absolute;width:2px;height:1.5em;background:#ccc;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0} .modal__close:hover:after,.modal__close:hover:before{background:#aaa} .modal__close:before{transform:rotate(-45deg)} @media screen and (max-width:768px){.modal__inner{width:90%;height:90%;box-sizing:border-box}} .btn{cursor:pointer;background:#27ae60;display:inline-block;padding:.5em 1em;color:#fff;border-radius:3px} .btn:hover,.btn:focus{background:#2ecc71} .btn:active{background:#27ae60;box-shadow:0 1px 2px rgba(0,0,0,.2) inset} .btn--blue{background:#2980b9} .btn--blue:hover,.btn--blue:focus{background:#3498db} .btn--blue:active{background:#2980b9} p img{max-width:200px;height:auto;float:left;margin:0 1em 1em 0} </style> </head> <body> <h1>CSS Modal Mod Kutusu</h1> <div> <p>Modal tetik butonunu istediğiniz yere yerleştirebilirsiniz.</p> <p> <label class="btn" for="modal-1">Modal kutusu 1</label> <label class="btn btn--blue" for="modal-2">Modal kutusu 2</label> </p> </div> <input class="modal-state" id="modal-1" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-1"></label> <div class="modal__inner"> <label class="modal__close" for="modal-1"></label> <h2>Modal kutusu 1</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> <input class="modal-state" id="modal-2" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-2"></label> <div class="modal__inner"><label class="modal__close" for="modal-2"></label> <h2>Modal kutusu 2</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Modal Kutusu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Modal Kutusu Arlina Design 6/02/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:1%;font:1/1.5em sans-serif;text-align:center;margin:0 auto 0 auto} .modal{opacity:0;visibility:hidden;position:fixed;top:0;right:0;bottom:0;left:0;text-align:left;background:rgba(0,0,0,.9);transition:opacity .25s ease} .modal__bg{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer} .modal-state{display:none} .modal-state:checked + .modal{opacity:1;visibility:visible} .modal-state:checked + .modal .modal__inner{top:0} .modal__inner{transition:top .25s ease;position:absolute;top:-20%;right:0;bottom:0;left:0;width:50%;margin:auto;overflow:auto;background:#fff;border-radius:5px;padding:1em 2em;height:50%} .modal__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .modal__close:after,.modal__close:before{content:'';position:absolute;width:2px;height:1.5em;background:#ccc;display:block;transform:rotate(45deg);left:50%;margin:-3px 0 0 -1px;top:0} .modal__close:hover:after,.modal__close:hover:before{background:#aaa} .modal__close:before{transform:rotate(-45deg)} @media screen and (max-width:768px){.modal__inner{width:90%;height:90%;box-sizing:border-box}} .btn{cursor:pointer;background:#27ae60;display:inline-block;padding:.5em 1em;color:#fff;border-radius:3px} .btn:hover,.btn:focus{background:#2ecc71} .btn:active{background:#27ae60;box-shadow:0 1px 2px rgba(0,0,0,.2) inset} .btn--blue{background:#2980b9} .btn--blue:hover,.btn--blue:focus{background:#3498db} .btn--blue:active{background:#2980b9} p img{max-width:200px;height:auto;float:left;margin:0 1em 1em 0} </style> </head> <body> <h1>CSS Modal Mod Kutusu</h1> <div> <p>Modal tetik butonunu istediğiniz yere yerleştirebilirsiniz.</p> <p> <label class="btn" for="modal-1">Modal kutusu 1</label> <label class="btn btn--blue" for="modal-2">Modal kutusu 2</label> </p> </div> <input class="modal-state" id="modal-1" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-1"></label> <div class="modal__inner"> <label class="modal__close" for="modal-1"></label> <h2>Modal kutusu 1</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> <input class="modal-state" id="modal-2" type="checkbox" /> <div class="modal"> <label class="modal__bg" for="modal-2"></label> <div class="modal__inner"><label class="modal__close" for="modal-2"></label> <h2>Modal kutusu 2</h2> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5biMSHUmaYFiPVGL8XvOseY1Fyxe-9wAuRvY-8qeL-eoGtUP4FSPJK3Qjl1yZHgV1ULvJm7vaeXcAA9bZawVq4hPBlsn1sbtK5bo3liViX_wGclRdpYOColnCgIEtf4x0WHXh0UkGDM/s1600/modal.png" alt="" />Aileyle beraber geçirilecek zamanlar da vardır, herkesin tek başına çalışmasını gerektirecek zamanlar da. Siz çocuğunuzun yanında iş projenizi tamamlarken, çocuğunuzun da kısa bir süre kontrollü olarak teknolojiyle haşır neşir olmasına izin verebilirsiniz. Önemli olan ne kadar süre ve hangi nitelikteki teknoloji ürünleriyle meşgul olduğudur.</p> </div> </div> </body> </html>
Yorum Gönder