HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS Eğitimi

CSS ANA SAYFA CSS'ye Giriş CSS Sözdizimi CSS Seçiciler CSS Nasıl Yapılır CSS Yorumları CSS Renkleri
Renkler RGB altıgen HSL
CSS Arka Planları
Arka plan rengi Arka plan görüntüsü Arka Plan Tekrarı Arka Plan Eki Arka Plan Steno
CSS Kenarlıkları
Sınırlar Sınır Genişliği Sınır rengi Kenar Kenarları Sınır Steno Yuvarlak Kenarlıklar
CSS Marjları
kenar boşlukları Margin Collapse
CSS Dolgusu CSS Yüksekliği/Genişliği CSS Kutu Modeli CSS Anahattı
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Metni
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS Yazı Tipleri
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS Simgeleri CSS Bağlantıları CSS Listeleri CSS Tabloları
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS Ekranı CSS Maksimum genişliği CSS Konumu CSS Z-endeksi CSS Taşması CSS Kayan Noktası
Float Clear Float Examples
CSS Satır içi blok CSS Hizalama CSS Birleştiriciler CSS Sözde sınıfı CSS Sözde öğesi CSS Opaklığı CSS Gezinme Çubuğu
Navbar Vertical Navbar Horizontal Navbar
CSS Açılır Listeleri CSS Resim Galerisi CSS Görüntü Sprite'ları CSS Attr Seçiciler CSS Formları CSS Sayaçları CSS Web Sitesi Düzeni CSS Birimleri CSS Özgüllüğü CSS !önemli CSS Matematik Fonksiyonları

Gelişmiş CSS

CSS Yuvarlak Köşeler CSS Kenarlık Resimleri CSS Arka Planları CSS Renkleri CSS Renk Anahtar Kelimeleri CSS Gradyanları
Linear Gradients Radial Gradients Conic Gradients
CSS Gölgeleri
Shadow Effects Box Shadow
CSS Metin Efektleri CSS Web Yazı Tipleri CSS 2D Dönüşümleri CSS 3D Dönüşümleri CSS Geçişleri CSS Animasyonları CSS Araç İpuçları CSS Stili Görüntüleri CSS Görüntü Yansıması CSS nesne uyumu CSS nesne konumu CSS Maskeleme CSS Düğmeleri CSS Sayfalandırma CSS Çoklu Sütunları CSS Kullanıcı Arayüzü CSS Değişkenleri
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS Kutu Boyutlandırma CSS Medya Sorguları CSS MQ Örnekleri CSS Esnek Kutusu
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Duyarlı

RWD Tanıtımı RWD Görünümü RWD Izgara Görünümü RWD Medya Sorguları RWD Görüntüleri RWD Videoları RWD Çerçeveleri RWD Şablonları

CSS Izgarası

Izgara Girişi Izgara Konteyner Izgara Öğesi

CSS SASS'ı

SASS Eğitimi

CSS Örnekleri

CSS Şablonları CSS Örnekleri css sınavı CSS Alıştırmaları CSS Sertifikası

CSS Referansları

CSS Referansı CSS Seçiciler CSS Fonksiyonları CSS Referansı Sesli CSS Web Güvenli Yazı Tipleri CSS Canlandırılabilir CSS Birimleri CSS PX-EM Dönüştürücü CSS Renkleri CSS Renk Değerleri CSS Varsayılan Değerleri CSS Tarayıcı Desteği

CSS Renkleri

❮ Öncesi Sonraki ❯

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ına sahip 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.

rgba (255, 0, 0, 0.2);
rgba (255, 0, 0, 0.4);
rgba (255, 0, 0, 0.6);
rgba (255, 0, 0, 0.8);

Aşağıdaki örnek, farklı RGBA renklerini 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 */

HSL Renkleri

HSL, Ton, Doygunluk ve Hafiflik anlamına gelir.

Bir HSL renk değeri şu şekilde belirtilir: hsl(ton, doygunluk, açıklık).

  1. Ton, renk tekerleğindeki bir derecedir (0'dan 360'a kadar):
    • 0 (veya 360) kırmızı
    • 120 yeşil
    • 240 mavi
  2. Doygunluk bir yüzde değeridir: %100 tam renktir.
  3. Hafiflik de bir yüzdedir; %0 koyu (siyah) ve %100 beyazdır.
hsl(0, %100, %30);
hsl(0, %100, %50);
hsl(0, %100, %70);
hsl(0, %100, %90);

Aşağıdaki örnek, farklı HSL renklerini 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 */

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.

hsla (0, %100, %30, 0,3);
hsla (0, %100, %50, 0.3);
hsla (0, %100, %70, 0,3);
hsla (0, %100, %90, 0.3);

Aşağıdaki örnek, farklı HSLA renklerini 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 */

opaklık

CSS opacityözelliği, tüm öğe için opaklığı ayarlar (hem arka plan rengi hem de metin opak/şeffaf olacaktır).

Özellik opacitydeğeri, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayı olmalıdır.

rgb(255, 0, 0);opaklık:0.2;
rgb(255, 0, 0);opaklık:0.4;
rgb(255, 0, 0);opaklık:0.6;
rgb(255, 0, 0);opaklık:0.8;

Yukarıdaki metnin de şeffaf/opak olacağına dikkat edin!

Aşağıdaki örnek, opaklığa sahip farklı öğeleri 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 */

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

<h1> öğesinin saydamlık içermeyen tam kırmızı arka plan rengi için RGBA renk değerini ekleyin.

<style>
h1 {
  background-color: ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


❮ Öncesi Sonraki ❯