× İletişim Formu Blogger CSS Akordeon Menü Arlina Design 5/23/2017 Etiketler : Blogger Akordeon Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html,body{margin:0;padding:0} h2{font-weight:normal} a{display:inline-block;padding:.5em;font-size:0.75em;color:#fff;background:rgba(0,0,0,0.2);text-decoration:none} .wrapper{margin:auto;width:90%;max-width:960px} .card{padding:1em;color:#333;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.25);box-shadow:0 0 10px rgba(0,0,0,.25)} .card h2:first-child,.card p:first-child{margin-top:0} @import url('https://fonts.googleapis.com/css?family=Droid+Sans%3Aregular%2C700'); body {line-height: 1.5em;font-size: 13px;font-family: 'Droid Sans',Arial,Verdana,sans-serif;color:#2c3e50;background:#ecf0f1;margin: 0 auto;} h1{text-align:center} .half{float:left;width:50%;padding:0 1em} .tab{position:relative;margin-bottom:1px;width:100%;color:#fff;overflow:hidden} input{position:absolute;opacity:0;z-index:-1} label{position:relative;display:block;padding:0 0 0 1em;background:#16a085;font-weight:bold;line-height:3;cursor:pointer} .blue label{background:#2980b9} .tab-content{max-height:0;overflow:hidden;background:#1abc9c;-webkit-transition:max-height .35s;transition:max-height .35s} .blue .tab-content{background:#3498db} .tab-content p{margin:1em} input:checked ~ .tab-content{max-height:10em} label::after{position:absolute;right:0;top:0;display:block;width:3em;height:3em;line-height:3;text-align:center;-webkit-transition:all .35s;transition:all .35s} input[type=checkbox] + label::after{content:"+"} input[type=radio] + label::after{content:"\25BC"} input[type=checkbox]:checked + label::after{-webkit-transform:rotate(315deg);transform:rotate(315deg)} input[type=radio]:checked + label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)} </style> </head> <body> <div class="wrapper"> <h1>Blogger CSS Akordeon Menü</h1> <div class="half"> <p><strong>Çoklu</strong> Açma</p> <div class="tab"> <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Etiket bir</label> <div class="tab-content"> <p>Bir nefescik, Allah'ın güzelliğini görsen..<br> Can'ın da ateşlere düşer, vücudun da..! <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">Etiket iki</label> <div class="tab-content"> <p>Ben canımın minneti altında kalmak istemiyorum.<br> Çünkü ben artık canla değil, aşk ile diriyim... <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab"> <input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">Etiket üç</label> <div class="tab-content"> <p>Ve elimi açıp aşk dilendim ; Nar olmadan nur olunmaz, nur olunmadan aşka visal bulunmaz. Yak beni Rabbim..! <br> <b>Hz. Mevlana</b> </p> </div> </div> </div> <div class="half"> <p><strong>Tekli</strong> Açma</p> <div class="tab blue"> <input id="tab-four" type="radio" name="tabs2"> <label for="tab-four">Etiket bir</label> <div class="tab-content"> <p>Ey can! Sana bir daralma gelirse yararınadır. Kaygılanma! Sürekli yaz mevsimi olsaydı,güneş bahçeyi yakıp kavururdu.. <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab blue"> <input id="tab-five" type="radio" name="tabs2"> <label for="tab-five">Etiket iki</label> <div class="tab-content"> <p>"Kendinize gelin; Hak’tan isteyin, başkasından değil; suyu denizde arayın, kuru derede değil!" <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab blue"> <input id="tab-six" type="radio" name="tabs2"> <label for="tab-six">Etiket üç</label> <div class="tab-content"> <p>Yum gözünü al eline Kalbim senin'dir... İstersen "CAM" kenarına koy güneş alsın... İstersen "CAN" yüreğine koy hep sende kalsın..!<br> <b>Hz. Mevlana</b> </p> </div> </div> </div> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Akordeon Menü" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Akordeon Menü Arlina Design 5/23/2017 Etiketler : Blogger Akordeon Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html,body{margin:0;padding:0} h2{font-weight:normal} a{display:inline-block;padding:.5em;font-size:0.75em;color:#fff;background:rgba(0,0,0,0.2);text-decoration:none} .wrapper{margin:auto;width:90%;max-width:960px} .card{padding:1em;color:#333;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.25);box-shadow:0 0 10px rgba(0,0,0,.25)} .card h2:first-child,.card p:first-child{margin-top:0} @import url('https://fonts.googleapis.com/css?family=Droid+Sans%3Aregular%2C700'); body {line-height: 1.5em;font-size: 13px;font-family: 'Droid Sans',Arial,Verdana,sans-serif;color:#2c3e50;background:#ecf0f1;margin: 0 auto;} h1{text-align:center} .half{float:left;width:50%;padding:0 1em} .tab{position:relative;margin-bottom:1px;width:100%;color:#fff;overflow:hidden} input{position:absolute;opacity:0;z-index:-1} label{position:relative;display:block;padding:0 0 0 1em;background:#16a085;font-weight:bold;line-height:3;cursor:pointer} .blue label{background:#2980b9} .tab-content{max-height:0;overflow:hidden;background:#1abc9c;-webkit-transition:max-height .35s;transition:max-height .35s} .blue .tab-content{background:#3498db} .tab-content p{margin:1em} input:checked ~ .tab-content{max-height:10em} label::after{position:absolute;right:0;top:0;display:block;width:3em;height:3em;line-height:3;text-align:center;-webkit-transition:all .35s;transition:all .35s} input[type=checkbox] + label::after{content:"+"} input[type=radio] + label::after{content:"\25BC"} input[type=checkbox]:checked + label::after{-webkit-transform:rotate(315deg);transform:rotate(315deg)} input[type=radio]:checked + label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)} </style> </head> <body> <div class="wrapper"> <h1>Blogger CSS Akordeon Menü</h1> <div class="half"> <p><strong>Çoklu</strong> Açma</p> <div class="tab"> <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Etiket bir</label> <div class="tab-content"> <p>Bir nefescik, Allah'ın güzelliğini görsen..<br> Can'ın da ateşlere düşer, vücudun da..! <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">Etiket iki</label> <div class="tab-content"> <p>Ben canımın minneti altında kalmak istemiyorum.<br> Çünkü ben artık canla değil, aşk ile diriyim... <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab"> <input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">Etiket üç</label> <div class="tab-content"> <p>Ve elimi açıp aşk dilendim ; Nar olmadan nur olunmaz, nur olunmadan aşka visal bulunmaz. Yak beni Rabbim..! <br> <b>Hz. Mevlana</b> </p> </div> </div> </div> <div class="half"> <p><strong>Tekli</strong> Açma</p> <div class="tab blue"> <input id="tab-four" type="radio" name="tabs2"> <label for="tab-four">Etiket bir</label> <div class="tab-content"> <p>Ey can! Sana bir daralma gelirse yararınadır. Kaygılanma! Sürekli yaz mevsimi olsaydı,güneş bahçeyi yakıp kavururdu.. <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab blue"> <input id="tab-five" type="radio" name="tabs2"> <label for="tab-five">Etiket iki</label> <div class="tab-content"> <p>"Kendinize gelin; Hak’tan isteyin, başkasından değil; suyu denizde arayın, kuru derede değil!" <br> <b>Hz. Mevlana</b> </p> </div> </div> <div class="tab blue"> <input id="tab-six" type="radio" name="tabs2"> <label for="tab-six">Etiket üç</label> <div class="tab-content"> <p>Yum gözünü al eline Kalbim senin'dir... İstersen "CAM" kenarına koy güneş alsın... İstersen "CAN" yüreğine koy hep sende kalsın..!<br> <b>Hz. Mevlana</b> </p> </div> </div> </div> </div> </body> </html>
Yorum Gönder