CSS Açılır Pencere Kodu

[leojely]

Yeniler için yararlı bulduğum bu kodu değişik yerlerde kullanabilirsiniz.
Ne İşe Yarar : Butona Tıkladığınızda Pencere Açılır.Pencerenin içine bilgilendirme yazısı ekleyebilirsiniz.
Kod:

Kod: Tümünü Seç Tümünü Kopyala

<style> .dugme{cursor:pointer;display:inline-block;padding:5px 10px;background:#eee;border:1px solid #d8d8d8;font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#444; -webkit-border-radius: 3px; border-radius: 3px; } [name="kapat"]{position:absolute;bottom:20px;right:20px;} .pencere{ position:fixed;top:-50%;left:-50%; width:380px;height:280px;background:#fff;box-shadow:0 0 6px 2px rgba(0,0,0,0.4); opacity:0; transition:opacity 0.6s ease-out; z-index:-1; padding:10px; -webkit-border-radius: 3px; border-radius: 3px; margin:-150px 0 0 -200px; } .Pencereac{width:1px;height:1px;visibility:hidden;} .Pencereac:checked + .pencere{ top:50%;left:50%; display:block; z-index:9; opacity:1;}</style>
<br>
<div id="pencerekodu"><label for="pencere" class="dugme">

TIKLA

</label><input type="checkbox" class="Pencereac" id="pencere" name="pencere"></input><label class="pencere">
<br><br><br>
<font size="5" color="#003399">Destek.10TR.NET</font><br>
<font size="4" color="#009900">Burayı Düzenleyin</font>


<label for="pencere" class="dugme" name="kapat">Kapat</label></label></div>

Demo : Tıkla Git.

[İndirmePaylasim]

teşekkürler

[leojely]

teşekkürler

[quote pid='542395' dateline='1452432801']
Rica ederim.
[/quote]