Color

Kategori: CSS , 28 Ekim 2019 , JanFranco


CSS yazı serisinde devam ediyoruz, renk özelliğini göreceğiz. CSS'te color property ile yazıların rengini değiştirebiliriz. Üç farklı şekilde renk belirleyebiliriz: rengin ismini girerek, hex kodu ile, rgb değeri ile. Hex ve rgb değerleri daha detaylı olsa da web tarayıcılarında tanımlı 147 renk ismi mevcut:


h1 {
	color: DarkCyan;
}
h2 {
	color: #ee3e80;
}
p {
	color: rgb(100,100,90);
}
background-color property ile arkaplan rengini değiştirebiliriz. CSS her HTML elementine bir kutuymuş gibi davranır. Bu kutuların arkaplan rengini değiştirebiliriz:


body {
	background-color: rgb(200,200,200);
}
h1 {
	background-color: DarkCyan;
}
h2 {
	background-color: #ee3e80;
}
p {
	background-color: white;
}
opacity ve rgba property'leri ile bu bahsettiğim kutuların saydamlığını belirleyebiliriz. Opacity 0 ve 1 arasında değer alır. opacity property ile bunu direk belirtebiliriz. rgba property ise 4 değer alır, ilk 3 değer rgb renk değerleri, dördüncü değer opacity değeridir:


p.one {
	background-color: rgb(0,0,0);
	opacity: 0.5;
}
p.two {
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5);
}
Ph değerlerinin renk skalasını gösterdiğimiz bir web sayfası hazırlayalım:


<!DOCTYPE html>
<html>
	<head>
		<title>Color</title>
		<style type="text/css">
			body {
				background-color: silver;
				color: white;
				padding: 20px;
				font-family: Arial, Verdana, sans-serif;
			}
			h1 {
				background-color: #ffffff;
				background-color: hsla(0,100%,100%,0.5);
				color: #64645A;
				padding: inherit;
			}
			p {
				padding: 5px;
				margin: 0px;
			}
			p.zero {
				background-color: rgb(238,62,128);
			}
			p.one {
				background-color: rgb(244,90,139);
			}
			p.two {
				background-color: rgb(243,106,152);
			}
			p.three {
				background-color: rgb(244,123,166);
			}
			p.four {
				background-color: rgb(245,140,178);
			}
			p.five {
				background-color: rgb(246,159,192);
			}
			p.six {
				background-color: rgb(245,176,204);
			}
			p.seven {
				background-color: rgb(0,187,136);
			}
			p.eight {
				background-color: rgb(140,202,242);
			}
			p.nine {
				background-color: rgb(114,193,240);
			}
			p.ten {
				background-color: rgb(84,182,237);
			}
			p.eleven {
				background-color: rgb(48,170,233);
			}
			p.twelve {
				background-color: rgb(0,160,230);
			}
			p.thirteen {
				background-color: rgb(0,149,226);
			}
			p.fourteen {
				background-color: rgb(0,136,221);
			}
		</style>
	</head>
	<body>
		<h1>pH Scales</h1>
		<p class="fourteen">14.0 VERY ALKALINE</p>
		<p class="thirteen">13.0</p>
		<p class="twelve">12.0</p>
		<p class="eleven">11.0</p>
		<p class="ten">10.0</p>
		<p class="nine">9.0</p>
		<p class="eight">8.0</p>
		<p class="seven">7.0 NEUTRAL</p>
		<p class="six">6.0</p>
		<p class="five">5.0</p>
		<p class="four">4.0</p>
		<p class="three">3.0</p>
		<p class="two">2.0</p>
		<p class="one">1.0</p>
		<p class="zero">0.0 VERY ACID</p>
	</body>
</html>
css-colors


Sonraki Yazı: Text in CSS
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın