What color is it?

RGB renkler ile yeni bir renk oluşturmak için, bu üç ışığında siyah ekran ya da beyaz zemin üzerinde birleştirilmiş olmaları gerekir. Bu üç ışık kaynağı, yeni oluşacak rengin bileşeni olarak adlandırılır ve bunlardan her biri yeni oluşan rengin içinde rast gele seçilmiş bir yoğunlukta bulunabilirler; hiç olmayabilecekleri gibi çok yoğun bir şekilde de bulunabilirler y da tamamen hepsinin karışımı da olabilir.

RGB renk modeli eklemeli bir modeldir. Bunu da ortaya bir renk spektrumu çıkarmak için bu renklerin farklı oranlarda birbirlerine eklenmek zorunda olmasından anlayabiliriz. Bütün renklerin tam yoğunlukla kullanılması bize beyaz rengi vereceği gibi ( burada beyaz renginin kalitesinin kullanılacak ana renk kaynağının yapısına göre değişeceği göz önünde bulundurulmalıdır) sıfır yoğunlukta birleşmeleri de bize siyah rengi verecektir ( hiçbir ışık ya da rengin olmaması siyah olarak değerlendirilir).

R, G veya B(Red, Green, Blue) 0 ile 255 arası değer alırlar Örneğin (0 0 0) renk kodu üç renkten de hiç olmadığı renk yani siyahtır. Aynı zamanda 16lık sistem ile düşündüğümüz zaman 255 255 255 kodları FF FF FF ‘e denk gelmektedir. Saati saniye saat dakika şeklinde düşündüğümüz zaman bunu hex kodları ile bağdaşlaştırabiliriz.
Şimdi gelelim asıl olaya, Bir html dosyasının arka planını belirlemek için saati kullanmak hoş olmaz mıydı?
Aşağıda ki kodları deneyin ve neler olacağını görün 🙂

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		@font-face {
			font-family:"Bebas";
			src: url('bebas.ttf');
		}

		* {
			margin:0;
			padding:0;
		}

		.time, #time {
			font-family:"bebas";
			font-size:112px;
			text-align:center;
			color:#f3f3f3;
			text-shadow:0px 0px 2px #333;
		}

		#time {
			position:absolute;
			left:50%;
			top:50%;
			margin-top:-112px;
			margin-left:-210px;
		}

		.time div {
			font-size:18px;
			display:block;
			position:absolute;
			top:60%;
			left:50%;
			margin-left:-30px;
		}

		body {
			transition:background 500ms;
		}
	</style>
	<script>
	function startTime() {
	    var today = new Date();
	    var h = today.getHours();
	    var m = today.getMinutes();
	    var s = today.getSeconds();
	    h = checkTime(h);
	    m = checkTime(m);
	    s = checkTime(s);
	    document.getElementById('time').innerHTML =
	    h + " : " + m + " : " + s;
	    document.getElementById('code').innerHTML =
	    "#" + h + m + s;
	    var t = setTimeout(startTime, 500);
	    document.body.style.background = "#"+h+m+s;
	}
	function checkTime(i) {
	    if (i < 10) {i = "0" + i}; 
	    return i;
	}
	</script>
	<title>What Color Is It ?</title>
</head>
<body onload="startTime()">

	<div id="time"></div>
	<div class="time">
		<div id="code"></div>
	</div>
</body>
</html>

Kodumuzun arka plan rengi saate göre değişiklik gösterecektir 🙂

Bu linke tıklayarak görüntüleyebilirsiniz.

2 Comments

Merve için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir