Animasyonlu Duyuru Panosu

[RequiemEaqLe]

Admin kp > Şablon & Stil > Şablonlar > Temanızı Seçin > Header Şablonlar > Header > En Alta Ekleyin ve içindekilerini kendinize göre ayarlayın.

Yeni nesil tarayıcıların gözdesi CSS3 ile hazırlanmış,tüm site ve bloglara uygun bu hazır koda bayılacaksınız! Henüz eski internet explorer sürümlerinde ve opera'da çalışmayan bu harika css animasyonuna sahip duyuru panosunun yazılarını, kod sonunda bulup kolayca değiştirebilirsiniz!
Canlı Demo: http://oyunpf.10tl.net

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

<!--Kod Dostu Animasyonlu Açılan Duyuru Panosu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<style>
#koddostu-cs3a{cursor:default;position:relative;border-top:8px solid #444;-moz-box-shadow:inset 0 0 6px #888;-webkit-box-shadow: inset 0 0 6px #888;box-shadow:inset 0 0 6px #888;background: #f0f0f0;color:#333;font-family:Helvetica, Arial, sans-serif;font-size:13px;}#koddostu-cs3a, #koddostu-kutu{width:260px;height:130px;padding:10px;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 6px;-moz-border-radius-bottomleft: 6px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;}#kd-kapa{position:absolute;top:0px;right:-22px;display:block;width:22px;height:22px;background:#555;color:#fff;line-height:22px;font-size:15px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;text-align:center;text-decoration:none !important;display:none;}</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style>#koddostu-kutu{font-family: Garamond, serif;font-weight:bold;font-size:54px;background:#882222;position:absolute;top:0px;left:0px;line-height:130px;text-align:center;text-decoration:none;color: rgba(0,0,0,0.5);text-shadow: 1px 1px 2px rgba(255,255,255,0.2);background: #666666;background: -moz-linear-gradient(-45deg, #666666 0%, #343434 100%);background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#666666), color-stop(100%,#343434));background: -webkit-linear-gradient(-45deg, #666666 0%,#343434 100%);background: -o-linear-gradient(-45deg, #666666 0%,#343434 100%);background: -ms-linear-gradient(-45deg, #666666 0%,#343434 100%);background: linear-gradient(135deg, #666666 0%,#343434 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#343434',GradientType=1 );
}.koddostuupturn{animation:koddostuupturn 1s ease;animation-fill-mode: forwards;-webkit-animation:koddostuupturn 1s ease;-webkit-animation-fill-mode: forwards;-webkit-border-bottom-right-radius: 6px;
}@-webkit-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@-o-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@-ms-keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}@keyframes koddostuupturn{0%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(0deg);-moz-transform:perspective(800px) rotateX(0deg);-ms-transform:perspective(800px) rotateX(0deg);-o-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)} 100%{-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}}

</style>
<!--[if lt IE 10]>
<style>
.koddostuupturn{
   top:-150px !important;
}
</style>
<![endif]-->

<div id="koddostu-cs3a" style="">
<koddostu><a href="javascript:void(0)" id="kd-kapa" onclick="document.getElementById('koddostu-kutu').className='';this.style.display='none';">x</a></koddostu>
<div id="koddostu-kutu" onmouseover="this.className='koddostuupturn';document.getElementById('kd-kapa').style.display='block'">Duyuru</div>

Merhaba!

<br/><br/>

Koddostu.com tarafından sitemiz için hazırlanmış bu ücretsiz duyuru panosundan sitemizle ilgili son yenilikleri öğrenebilirsiniz!

<br/><br/>

Görüşmek üzere!

</div>

<!--Telif sahibi:koddostu.com-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Kod Dostu Animasyonlu Açılan Duyuru Panosu STOP-->

[Landgrav]

Tesekkurler

[RequiemEaqLe]

önemli degil