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.
<!--Author: koddostu.com-->
<!--Licence: GNU GPL V2.0-->
<!--Name: Animasyonlu Duyuru Panosu (SADECE BURADA)-->
<!--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><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-->
<script src="https://www.koddostu.com/duzelt.js?no=147"></script>