cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="kayanyazi">
  <marquee>
    ***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gideceği yoldan eminsen,engeller dinlenme noktan olmaktan öteye gidemez.(Paulo COELHO)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Küsmek ve darılmak için bahaneler aramak yerine, sevmek ve sevilmek için çareler arayın.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Bir insan taraf tutmaya başlar başlamaz,dünyada da o gerçekleri o kadar az görmeye başlar.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Her insan kendine yakışanı yapar. Çünkü kalite asla tesadüf değildir.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Dostluk; unutulmayacak kadar güzel ve sadece ender insanlarla yaşanacak kadar özeldir.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </marquee>
</div>
<div id="saat"></div>
<div class="tarih"></div>
<script type="text/javascript">

var colour="#000000";
var sparkles=120;


var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

</script>


            
          
!
            
              body {
  font-family: 'Monotype Corsiva', cursive;
}
#kayanyazi{
  width:1200px;
  height:50px;
  font-size: 36px;
  font-family:'Monotype Corsiva', cursive;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
}

#saat{
  border:20px groove  grey;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
  border-radius:3px;
  width:500px;
  height:300px;
  text-align: center;
  line-height:300px;
  font-size: 100px;
  font-family:'Stencil Std',cursive;
  color:grey;
  background-color: black;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.tarih{
  width:500px; 
  height:80px;
	background: white;
	font-size: 4em;
  font-family:'Rosewood Std',cursive;
	margin-left:auto;
  margin-right:auto;
  margin-top:-120px;
	text-align: center;
	line-height: 100px;
	background-color: black;
  color: grey;
}
/*Tarih kısmınıda yapsamda sürekli 1 ay geriden geliyor*/
            
          
!
            
              (function() {
	var saat = document.querySelector('#saat');
	var ekstraSifir = function(x) {
		return x < 10 ? '0' + x : x;
	};
	
	var zaman = function() {
		var tarih = new Date();
		var hours = ekstraSifir( tarih.getHours() );
		var dakika = ekstraSifir( tarih.getMinutes() );
		var saniye = ekstraSifir( tarih.getSeconds() );
		var current_time = [hours,dakika,saniye].join(':');
		saat.innerHTML = current_time;
	};
	zaman();
	setInterval(zaman,1000);
}()
);


(function() {
	var tarih = document.querySelector('.tarih');
	var ekstrasifir = function(y) {
		return y < 10 ? '0' + y : y;
	};
	
	var tah = function() {
		var tari = new Date();
		var yil = ekstrasifir( tari.getFullYear() );
		var ay = ekstrasifir( tari.getMonth() );
		var gun = ekstrasifir( tari.getDay() );
		var current_time = [gun,ay,yil].join('/');
		tarih.innerHTML = current_time;
	};
	tah();
	setInterval(tah,1000);
}()
);
/*Tarih kısmınıda yapsamda sürekli 1 ay geriden geliyor*/
            
          
!
999px
Loading ..................

Console