× İletişim Formu Blogger Modal 3 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=Yanone+Kaffeesatz);body{background:#444;width:100%} .button{font-family:'Yanone Kaffeesatz',Arial,sans-serif;margin:40px auto;font-size:50px;text-decoration:none;text-shadow:1px 1px 0 #fff;font-weight:400;color:#666;cursor:pointer;padding:20px 20px 20px;position:relative;top:50px;background:#eee;width:300px;display:block;text-align:center;box-shadow:1px 1px 1px #fff;border-radius:2px;transition:all 0.5s ease-out} .button:hover{color:#333;background:#eeffff;transition:all 0.5s ease-out} .modalbg{font-family: Arial, Helvetica, sans-serif;position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:9;transition:all 2s ease-out;display:block;pointer-events:none} .modalbg .dialog{width:400px;position:relative;top:-1000px;margin:10% auto;padding:5px 20px 13px 20px;border-radius:10px;background:-webkit-linear-gradient(#fff,#ccc);box-shadow:0 0 10px #000} .modalbg .dialog{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)} .modalbg:target{display:block;pointer-events:auto;background:rgba(0,0,0,0.8);transition:all 0.5s ease-out} .modalbg:target .dialog{top:-20px;transition:all 0.8s ease-out} .close{background:#606061;color:#fff;line-height:25px;position:absolute;right:-12px;text-align:center;top:-10px;width:24px;text-decoration:none;font-weight:bold;border-radius:12px;box-shadow:0 0 10px #000;transition:all 0.5s ease-out} .close{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)} .close:hover{background:#00d9ff;transition:all 0.5s ease-out} .fineprint{font-style:italic;font-size:10px;color:#646} a{color:#333;text-decoration:none} </style> </head> <body> <a class="button" href="#openModal">Aç şunu!</a> <div id="openModal" class="modalbg"> <div class="dialog"> <a href="#close" title="Close" class="close">X</a> <h2>Çocuklar Neden Yemek Yemez?</h2> <p>"İştahsızlık, bir çocuğun yedikleri ile ailesinin ondan yemesini bekledikleri arasındaki denge sorunudur."</p> <p>Aslen beslenme dediğimiz durumun fizyolojik ve davranışsal öğelerinden evvel psişik boyutunun hem anne baba hem de çocuklar için önemi çoğunlukla gözden kaçmakta...</p> <p class="fineprint">Önemli Hatırlatma: Bu içerik ilgili uzman danışman tarafından izleyicilerimizi bilgilendirme amaçlı hazırlanmıştır. Kendinizin veya çocuğunuzun sağlığı ile ilgili her konuda, bir tıp doktoruna veya pedagoga danışmanızı tavsiye ederiz.</p> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger Modal 3" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger Modal 3 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=Yanone+Kaffeesatz);body{background:#444;width:100%} .button{font-family:'Yanone Kaffeesatz',Arial,sans-serif;margin:40px auto;font-size:50px;text-decoration:none;text-shadow:1px 1px 0 #fff;font-weight:400;color:#666;cursor:pointer;padding:20px 20px 20px;position:relative;top:50px;background:#eee;width:300px;display:block;text-align:center;box-shadow:1px 1px 1px #fff;border-radius:2px;transition:all 0.5s ease-out} .button:hover{color:#333;background:#eeffff;transition:all 0.5s ease-out} .modalbg{font-family: Arial, Helvetica, sans-serif;position:fixed;top:0;right:0;bottom:0;left:0;background:transparent;z-index:9;transition:all 2s ease-out;display:block;pointer-events:none} .modalbg .dialog{width:400px;position:relative;top:-1000px;margin:10% auto;padding:5px 20px 13px 20px;border-radius:10px;background:-webkit-linear-gradient(#fff,#ccc);box-shadow:0 0 10px #000} .modalbg .dialog{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)} .modalbg:target{display:block;pointer-events:auto;background:rgba(0,0,0,0.8);transition:all 0.5s ease-out} .modalbg:target .dialog{top:-20px;transition:all 0.8s ease-out} .close{background:#606061;color:#fff;line-height:25px;position:absolute;right:-12px;text-align:center;top:-10px;width:24px;text-decoration:none;font-weight:bold;border-radius:12px;box-shadow:0 0 10px #000;transition:all 0.5s ease-out} .close{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=3)} .close:hover{background:#00d9ff;transition:all 0.5s ease-out} .fineprint{font-style:italic;font-size:10px;color:#646} a{color:#333;text-decoration:none} </style> </head> <body> <a class="button" href="#openModal">Aç şunu!</a> <div id="openModal" class="modalbg"> <div class="dialog"> <a href="#close" title="Close" class="close">X</a> <h2>Çocuklar Neden Yemek Yemez?</h2> <p>"İştahsızlık, bir çocuğun yedikleri ile ailesinin ondan yemesini bekledikleri arasındaki denge sorunudur."</p> <p>Aslen beslenme dediğimiz durumun fizyolojik ve davranışsal öğelerinden evvel psişik boyutunun hem anne baba hem de çocuklar için önemi çoğunlukla gözden kaçmakta...</p> <p class="fineprint">Önemli Hatırlatma: Bu içerik ilgili uzman danışman tarafından izleyicilerimizi bilgilendirme amaçlı hazırlanmıştır. Kendinizin veya çocuğunuzun sağlığı ile ilgili her konuda, bir tıp doktoruna veya pedagoga danışmanızı tavsiye ederiz.</p> </div> </div> </body> </html>
Yorum Gönder