![[DEV]AB](/data/avatars/s/2135/2135420.jpg?1657747839){kind=avatar}
Türkiye'de ilk Mobil & PC Aynı Anda Metin2 Oyna. Triarchonline kalıcı ve uzun ömürlü yapısı ile 24 Temmuz'da açılıyor. | 1-99 Mobil Metin2 Triarch HEMEN TIKLA!
CSS Renkleri,
CSS, 140'tan fazla renk adını, HEX değerini, RGB değerlerini , RGBA değerlerini, HSL değerlerini, HSLA değerlerini ve opaklığı destekler.RGBA Renkleri
RGBA renk değerleri, bir rengin opaklığını belirten alfa kanalıyla RGB renk değerlerinin bir uzantısıdır.Bir RGBA renk değeri şu şekilde belirtilir: rgba(kırmızı, yeşil, mavi, alfa). Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Aşağıdaki örnek, farklı RGBA renklerini tanımlar:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<h1>Define Colors With RGBA Values</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>HSL Renkleri
HSL, Ton, Doygunluk ve Hafiflik anlamına gelir.Bir HSL renk değeri şu şekilde belirtilir: hsl(ton, doygunluk, açıklık).
- Ton, renk tekerleğindeki bir derecedir (0'dan 360'a kadar):
- 0 (veya 360) kırmızı
- 120 yeşil
- 240 mavi
- Doygunluk bir yüzde değeridir: %100 tam renktir.
- Hafiflik de bir yüzdedir; %0 koyu (siyah) ve %100 beyazdır.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Aşağıdaki örnek, farklı HSL renklerini tanımlar:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>
<h1>Define Colors With HSL Values</h1>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>HSLA Renkleri
HSLA renk değerleri, bir rengin opaklığını belirten alfa kanalına sahip HSL renk değerlerinin bir uzantısıdır.Bir HSLA renk değeri şu şekilde belirtilir: hsla(hue, saturation, lightness, alpha), burada alpha parametresi opaklığı tanımlar. Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Aşağıdaki örnek, farklı HSLA renklerini tanımlar:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<h1>Define Colors With HSLA Values</h1>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>
</body>
</html>opaklık
CSS opacity özelliği, tüm öğe için opaklığı ayarlar (hem arka plan rengi hem de metin opak/şeffaf olacaktır).opacity Özellik değeri 0.0 (tamamen şeffaf) ve 1.0 (tamamen opak) arasında bir sayı olmalıdır.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Yukarıdaki metnin de şeffaf/opak olacağına dikkat edin!
Aşağıdaki örnek, opaklığa sahip farklı öğeleri gösterir:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
<body>
<h1>Define Colors With Opacity</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
</html>
Son düzenleme:
Konu Sahibi
Konu Sahibi
Paylaşım için teşekkürler
Rica Ederim..Yorumlarınız için Teşekkürler..Paylaşım için teşekkürler
