htmlkodlari69 - Retro İntro Kodu

<script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css">div.koddostu-tisikirlir{position:fixed;z-index:9900;}div.sipirmin-koddostu{top:0px;left:0px;width:100%;height:100%;background:#290700 url(http://4.bp.blogspot.com/-1Fn_lRVkAA8/US8z9bu70OI/AAAAAAAASrk/aAgziOKvWrg/s1600/kdostu.jpg) repeat top left;}</style><style type="text/css">div.koddostu-tisikirlir{_position:absolute;}div.sipirmin-koddostu{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );} .sipaydirmen{display:inline-block;margin:20px 10px;background-color:#290700;position:relative;width:112px;height:53px;overflow:hidden;vertical-align:top;border-top:1px solid #290700;-webkit-border-top-left-radius: 2px;-webkit-border-top-right-radius: 2px;border-top-left-radius: 2px;border-top-right-radius: 2px;} .tisikirlir{position:absolute;top:-10px;border-left:1px solid #390700;border-right:1px solid #390700; left:0px;display:block;width:230px;height:67px;background:transparent url(http://3.bp.blogspot.com/-CmSyvS7VWGA/US8k28WhKdI/AAAAAAAASm0/asiBY2lhPpA/s1600/drawer_small_wlabel.png) no-repeat -59px 0px;text-align:left !important;padding-left:28px;padding-top:31px;font-family:Helvetica, Arial, sans-serif;font-size:12px;font-weight:normal;color:#da2;text-decoration:none !important;} .tisikirlir span{text-align:center;display:block;background-color:transprent;width:57px;text-decoration:none !important;font-family:Helvetica, Arial, sans-serif;font-size:12px;font-weight:normal;color:#da2;} #text-shadow-box {position: fixed;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;overflow: hidden;background: transparent;font-family: Rockwell, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;}#text-shadow-box #tsb-text,#text-shadow-box #tsb-link {position: absolute;top: 40%;left: 0;width: 100%;height: 1em;margin: -0.77em 0 0 0;font-size: 70px;line-height: 1em;font-weight: bold;text-align: center;}#text-shadow-box #tsb-text {font-size: 100px;color: transparent;text-shadow: black 0px -45.2px 19px;}#text-shadow-box #tsb-link a {color: #FFFFFF;text-decoration: none;}#text-shadow-box #tsb-box,#text-shadow-box #tsb-wall {position: absolute;top: 41%;left: 0;width: 100%;height: 60%;}#text-shadow-box #tsb-box {}#text-shadow-box #tsb-wall {background: #999;}#text-shadow-box #tsb-wall p {position: relative;font-size: 15px;line-height: 1.5em;text-align: justify;color: #222;width: 550px;margin: 1.5em auto;cursor: default;}#text-shadow-box #tsb-wall p a {color: #fff;}#text-shadow-box #tsb-wall p a:hover {text-decoration: none;color: #000;background: #fff;}#tsb-spot {position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;pointer-events: none;background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);} </style> <div class="koddostu-tisikirlir sipirmin-koddostu">  <center> <div class="benoylemidedim" style="position:relative;margin-top:10%;width:326px;height:190px;margin-bottom:25px;"> <div style="width:162px;height:156px;border-top:2px solid #521300;border-bottom:2px solid #521300;background:#f2f2f2 url(http://3.bp.blogspot.com/-kvM9K1V7YQg/UQPk0RMwr6I/AAAAAAAARyM/R2izk9QUdcI/s1600/koddostusaydam.png) repeat top left;position:absolute;z-index:9910;top:12px;left:82px;-moz-box-shadow: inset 0 0 6px 3px #000;-webkit-box-shadow: inset 0 0 6px 3px #000;box-shadow: inset 0 0 6px 3px #000;"> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#c60;font-weight:bold;font-size:16px; text-shadow: 0px 0px 4px #888;">Hoşgeldiniz!<br/><br/><br/><span style="font-size:14px;">Haydi bir çekmece seçin!</span></a> </div> <div class="rightpenn" style="position:relative;z-index:9940;display:inline-block;width:162px;height:184px;background:transparent url(http://3.bp.blogspot.com/-WLuHPEGgfeY/US8k3FJhl6I/AAAAAAAASm4/6HJpmxHUgjw/s1600/windowLeftOpenSequence.png) no-repeat -1px 0px"></div><div class="leftpenn" style="position:relative;z-index:9940;display:inline-block;width:162px;height:184px;background:transparent url(http://1.bp.blogspot.com/-oZipEY67MWs/US8k3uUaldI/AAAAAAAASm8/Rsrks-7tH2c/s1600/windowRightOpenSequence.png) no-repeat -964px 0px"></div> </div>  <div id="text-shadow-box"><div id="tsb-box"></div><p id="tsb-text"></p><div id="tsb-ie"></div>    <div id="tsb-spot"></div></div> <script type="text/javascript" language="javascript" charset="utf-8">   var text = null;var spot = null;var box = null;var boxProperty = '';init();function init() { text = document.getElementById('tsb-text'); spot = document.getElementById('tsb-spot'); if (text && spot) { document.getElementById('text-shadow-box').onmousemove = onMouseMove; document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});}; } } function onMouseMove(e) { if (typeof e === 'undefined' || typeof e.clientX === 'undefined') { return;} var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4; var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4; var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5); xm = e.clientX - Math.floor(window.innerWidth / 2); ym = e.clientY - Math.floor(window.innerHeight / 2); spot.style.backgroundPosition = xm + 'px ' + ym + 'px'; } </script>          <div class="sipaydirmen"> <a href="http://www.koddostu.com/genel.html" target="_blank" class="tisikirlir"><span>Genel</span></a> </div>   <div class="sipaydirmen"> <a href="http://www.koddostu.com/forum.html" target="_blank" class="tisikirlir"><span>Forum</span></a> </div>  <div class="sipaydirmen"> <a href="http://www.koddostu.com/blog.html" target="_blank" class="tisikirlir"><span>Blog</span></a> </div>  <div class="sipaydirmen"> <a href="http://www.koddostu.com/ekstra.html" target="_blank" class="tisikirlir"><span>Ekstra</span></a> </div><br/>  <div class="sipaydirmen"> <a href="http://www.koddostu.com/link5.html" target="_blank" class="tisikirlir"><span>Link5</span></a> </div>   <div class="sipaydirmen"> <a href="http://www.koddostu.com/link6.html" target="_blank" class="tisikirlir"><span>Link6</span></a> </div>  <div class="sipaydirmen"> <a href="http://www.koddostu.com/link7.html" target="_blank" class="tisikirlir"><span>Link7</span></a> </div>  <div class="sipaydirmen"> <a href="http://www.koddostu.com/link8.html" target="_blank" class="tisikirlir"><span>Link8</span></a> </div>     <a href="javascript:void(0)" onclick="window.open('h'+'t'+'tp'+':'+'//'+'w'+'ww.'+'k'+'oddo'+'stu.'+'c'+'om/2013/02/r'+'etro-i'+'ntro-k'+'odu-h'+'azr-k'+'od.'+'h'+'tml','')" style="position:absolute;bottom:5px;right:15px;color:#440;text-decoration:none;">© Koddostu </a> </center> <script> $(".sipaydirmen").mouseenter(function(){ $(this).animate({ height: "63px", marginBottom: "10px", }, 200 ); $(this).children('a').eq(0).css({ backgroundColor: "0d0300" }); $(this).children('a').eq(0).animate({ top: "0px" }, 200 ); $(".sipaydirmen").not(this).children('a').css({ backgroundColor: "290700" }); $(".sipaydirmen").not(this).children('a').animate({ top: "-10px" }, 200 ); $(".sipaydirmen").not(this).animate({ marginBottom: "20px", height: "53px" }, 200 );   }); $(document).ready(function(){ evetac(); });   $(".benoylemidedim").mouseenter(function(){ evetkapa(); setTimeout(function(){evetac();},500); });   function acbiraz(){  $(".leftpenn").css({ backgroundPosition: "+=160px 0px" }); $(".rightpenn").css({ backgroundPosition: "-=160px 0px" }); } function kapabiraz(){  $(".leftpenn").css({ backgroundPosition: "-=160px 0px" }); $(".rightpenn").css({ backgroundPosition: "+=160px 0px" }); }  function evetac(){ setTimeout(function(){acbiraz();},100); setTimeout(function(){acbiraz();},200); setTimeout(function(){acbiraz();},300); setTimeout(function(){acbiraz();},400); setTimeout(function(){acbiraz();},500); setTimeout(function(){acbiraz();},600); } function evetkapa(){ setTimeout(function(){kapabiraz();},10); setTimeout(function(){kapabiraz();},100); setTimeout(function(){kapabiraz();},200); setTimeout(function(){kapabiraz();},300); setTimeout(function(){kapabiraz();},400); setTimeout(function(){kapabiraz();},500);  }  </script> </div>

önizleme için tıkla