× İletişim Formu Blogger Modal İnfo Arlina Design 5/24/2017 Etiketler : Blogger CSS 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;} .info-box{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} .info-content{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer} .info-state{display:none} .info-state:checked + .info-box{opacity:1;visibility:visible} .info-state:checked + .info-box .info-inner{top:0} .info-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%} .info-close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .info-close:after,.info-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} .info-close:hover:after,.info-close:hover:before{background:#aaa} .info-close:before{transform:rotate(-45deg)} @media screen and (max-width:768px){.info-inner{width:90%;height:90%;box-sizing:border-box}} body{padding:1%;font:1/1.5em sans-serif;text-align:center} .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} </style> </head> <body> <label class="btn" for="info-modal">Modal İnfo</label> <input class="info-state" id="info-modal" type="checkbox" /> <div class="info-box"> <label class="info-content" for="info-modal"></label> <div class="info-inner"> <label class="info-close" for="info-modal"></label> <h2>Blogger Eklentileri</h2> <p>Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. <br><br> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Modal İnfo" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Modal İnfo Arlina Design 5/24/2017 Etiketler : Blogger CSS 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;} .info-box{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} .info-content{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer} .info-state{display:none} .info-state:checked + .info-box{opacity:1;visibility:visible} .info-state:checked + .info-box .info-inner{top:0} .info-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%} .info-close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer} .info-close:after,.info-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} .info-close:hover:after,.info-close:hover:before{background:#aaa} .info-close:before{transform:rotate(-45deg)} @media screen and (max-width:768px){.info-inner{width:90%;height:90%;box-sizing:border-box}} body{padding:1%;font:1/1.5em sans-serif;text-align:center} .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} </style> </head> <body> <label class="btn" for="info-modal">Modal İnfo</label> <input class="info-state" id="info-modal" type="checkbox" /> <div class="info-box"> <label class="info-content" for="info-modal"></label> <div class="info-inner"> <label class="info-close" for="info-modal"></label> <h2>Blogger Eklentileri</h2> <p>Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog. <br><br> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.</p> </div> </div> </body> </html>
Yorum Gönder