ufufuk 5000.Mesaj'a Özel Html/Css/JQuery İle 2 Adet Kodlama

[Ufufuk]

Bugün 5000.mesajıma ulaştım bunun içinde 2 tane hediye yapmaya karar verdim 1-2 haftadır uğraşıyordum başardım :)


1.Hediyem
Yazı Üzerinde Mause İle Gezdiğimiz Zaman Arkaplan Hareket Ediyor


2.Hediyem


Bunu söylemiyeceğim girip kendiniz bakabilirsiniz :D


Demo;
forumuk.10tr.net/portal.php





1.Hediyenin Kodları

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

<style>


.metin{
  color: transparent;
  font: 700 90px sans-serif;
  background: url("http://hadiyukle.com/image.php?di=38RE") repeat;
  -webkit-background-clip: text;
}
</style>



</div>

  <div class="metin">5000.MESAJ :)</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var fareX, fareY;
  var yatay, dikey;
  $(document).mousemove(function(e){
    fareX = e.pageX;
    fareY = e.pageY;
    yatay = ((4 * fareX) / 402) + 42;
    dikey = ((4 * fareY) / 402) + 50;
    $(".metin").css({"background-position": yatay + "5%" + dikey + "5%"});
  });
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35305524-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> 


2.Hediyenin Kodları

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

<script type="text/javascript" src="//say.ac/v2.php?sid=4687"></script>
</body>
</html>
<div class="msjozelbeta">
  <label for="sakli-checkbox" class="msjozeltasarim-ac"><strong>ufufuk Hakkında Bilgi</strong> İçin Tıkla</label>
</div>
<input id="sakli-checkbox" type="checkbox"/>

<div class="msjozeletrf">
  <div class="msjozeltasarim">
    <label for="sakli-checkbox" class="msjozelkpatt">✖(kapat)</label>
    <h2><font color="green">ufufuk Hakkında</h2>
      <img src="http://hadiyukle.com/image.php?di=OJMV"><div class="msjozelyazi"><h4>ufufuk-5000.Mesaj'a özel kodlama  :)</br></br>Desıgner And Coder:ufufuk</h4></font></p>

    </br>
    </br>
  <div class="msjozelyazi2"><center><h4>Html/Css/Js/JQuary/Php/</center>
    </br>

   <h4> Html/Css Bilgim Yüksek,
    <p>Js Bilgim Ortaya Yakın,
      <p>JQuary Bilgim ne az ne çok :) Ortaya Yakın Diyebilirim,
      <p>Php Bilgim az miktar en hızlı bunu geliştirmeye çalışıyorum.
     </br>
    </br>
        <center>Okuduğunuz İçin Teşekkürler.</center>
    </h4></font></p>
 
  
    </p>
  </div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35305524-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="//say.ac/v2.php?sid=4687"></script>
</body>
</html>

<style>
 input[type='checkbox']#sakli-checkbox{
 display:none;
}

.msjozeltasarim{
   font:300 14px 'Roboto', sans-serif;
  background-color:rgb(214, 218, 180);
  width: 45%;
  height: 60%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border-radius:5px;
  padding:10px 15px;
}

.msjozeltasarim .msjozelkpatt{
  float:right; 
  color:#666; 
  cursor:pointer;
}

.msjozeletrf {
  background:rgba(240, 90, 25, 0.5);
  opacity:0;
  visibility:hidden;
  z-index: 99999;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

input[type='checkbox']#sakli-checkbox:checked ~ .msjozeletrf{
  position:absolute;
  z-index:9999;
  top:0;bottom:0;left:0; right:0;
  opacity:1;
  visibility:visible;
}



@media (max-width:1280px){.msjozeltasarim{width:70%; height:70%;}}
@media (max-width:768px){.msjozeltasarim{width:90%; height:90%;}}

.msjozelbeta{
  margin:auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  width:60%;
  text-align:center;
  padding-top:140px;
}

.msjozelbeta h1{
  font:100 35px 'Roboto', sans-serif;
  color:white;
  text-align:center;
 top: 80px;
}

.msjozelbeta .makaleyi-oku,.msjozelbeta .msjozeltasarim-ac{
   font:300 14px 'Roboto', sans-serif;
  color:white; 
  border:0;
  padding:10px 15px;
  border-radius:5px;
  cursor:pointer;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  display:inline-table;
}

.msjozelbeta .msjozeltasarim-ac{
  background-color:#7EC56A; 
  border-radius: 15px 80px;
  -webkit-transform: rotate(4deg);
  -webkit-filter: grayscale(50%);
 -moz-transform: rotate(4deg);
}

.msjozelbeta .msjozeltasarim-ac:hover{
  background-color:#C57B6A;
}

.msjozelbeta .makaleyi-oku{
  background-color:#000; 
  color:green; 
  border:0;
  padding:10px 15px;
  border-radius:5px;
  cursor:pointer;
  -moz-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  display:inline-table;
}

.msjozelbeta .makaleyi-oku:hover{
  background-color:#16a085;
}
  .msjozelyazi {
    text-shadow: 0px 0px 8px red;
    color:#16a085;
    font-family:Segoe Print;
    transition: 0.2s;
  }
 
    .msjozelyazi:hover {
  color: #2980b9;
   transition: 0.2s;
  }

  
  .msjozelyazi2 {
     text-shadow: 0px 0px 8px blue;
    color: #16a085;
    font-family:Segoe Print;
    transition: 0.2s;
  }

  .msjozelyazi2:hover {
  color: #34495e;
   transition: 0.2s;
  }
  
  
.msjozeltasarim h2{color:#3498db; font-weight:300; margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid #ecf0f1;}
.msjozeltasarim img{float:left;margin:0 10px 10px 0}
</style> 


İnşAllah güzel olmuştur bayağı bir zorladı :)