CSS3 Renkleri
CSS renk adlarını, onaltılık ve RGB renk destekliyor.
Buna ek olarak, CSS3 de tanıtır:
- RGBA renkleri
- HSL renk
- HSLA renkleri
- opaklık
Tarayıcı Desteği
Tablodaki rakamlar tamamen CSS3 renk değerlerini / tesise destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| RGBA, HSL, and HSLA | 4.0 | 9.0 | 3.0 | 3.1 | 10.1 |
| opaklık | 4.0 | 9.0 | 2.0 | 3.1 | 10.1 |
RGBA Renkleri
RGBA renk değerleri, RGB renk değerlerinin bir uzantısı olan alpha bir renk için donukluk belirtir - kanal.
: Bir RGBA renk değeri ile belirtilir rgba(red, green, blue, alpha ) . alpha parametresi 0.0 arasında bir sayıdır (fully transparent) ve 1.0 (fully opaque) .
Aşağıdaki örnek, farklı RGBA renkler tanımlar:
Örnek
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red
with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue
with opacity */
Kendin dene " HSL Renkleri
HSL Ton, Doygunluk ve Lightness duruyor.
: Bir HSL renk değeri ile belirtilir hsl(hue, saturation, lightness) .
- Ton renk çarkı üzerinde bir derece (from 0 to 360) :
- 0 (or 360) kırmızı
- 120 yeşil
- 240 mavi
- Doygunluk bir yüzde değeri:% 100 tam bir renktir.
- Hafiflik da yüzdesidir; % 0 karanlık (black) ve% 100 beyaz.
Aşağıdaki örnek, farklı HSL renk tanımlar:
Örnek
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark
green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Kendin dene " HSLA Renkleri
Yüksek dayanımlı düşük alaşımlı renk değerleri bir ile HSL renk değerlerinin bir uzantısı olan alpha bir renk için donukluk belirtir - kanal.
: Bir yüksek dayanımlı düşük alaşımlı renk değeri ile belirtilir hsla(hue, saturation, lightness, alpha ) , alpha parametre donukluk tanımlar. alpha parametresi 0.0 arasında bir sayıdır (fully transparent) ve 1.0 (fully opaque) .
Aşağıdaki örnekte, farklı yüksek dayanımlı düşük alaşımlı renkler tanımlar:
Örnek
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark
green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green
with opacity */
Kendin dene " opaklık
CSS3 donukluk özelliği belirli bir RGB değeri için opaklığı ayarlar.
Opaklık özelliği değeri 0.0 arasında bir sayı olması gerekir (fully transparent) ve 1.0 (fully opaque) .
Yukarıdaki metin de opak olacak dikkat edin.
Aşağıdaki örnek, donukluk farklı RGB değerlerini gösterir:
Örnek
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity
*/
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with
opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue
with opacity */
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»