0Pricing
CSS Academy · Ders

Opaklık ve RGBA Saydamlığı

opacity özelliğini ve rgba() renk değerlerini kullanarak öğelerin saydamlığını denetleyin.

Opaklık ve RGBA Saydamlığı, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

opacity Özelliği

opacity özelliği, alt öğeleri ve içeriği de dâhil olmak üzere öğenin tamamının saydamlığını ayarlar. Değerler 0 (tamamen saydam) ile 1 (tamamen opak) arasında değişir.

<div class="overlay">Overlay at 50% opacity</div>

opacity Tüm Alt Öğeleri Etkiler

Önemli bir sınırlama şudur: opacity, öğe ağacının tamamını etkiler. opacity: 0.5 değerine sahip bir öğenin içindeki metin, görseller ve alt öğelerin tümü %50 saydam olur; alt öğeleri üst öğelerinden daha opak yapamazsınız.

Yalnızca Saydam Renk İçin RGBA

Metni veya alt öğeleri etkilemeden yalnızca arka plan rengini saydam yapmak için opacity yerine rgba() kullanın:

<div class="card">Card with transparent background, opaque text</div>

RGBA ve opacity Karşılaştırması

Şu zihinsel modeli kullanın:

  • opacity: 0.5 — öğenin tamamı ve alt öğeleri saydam olur
  • rgba(r,g,b,0.5) — yalnızca renk değeri saydamdır; alt öğeler etkilenmez

HSLA Saydamlığı

Aynı ilke hsla() için de geçerlidir. Dördüncü bağımsız değişken alfa kanalıdır (0–1):

<div class="tooltip">Tooltip with HSLA background</div>

Modern Boşlukla Ayrılmış Söz Dizimi

Modern CSS, "a" varyantı olmadan rgb() ve hsl() içinde alfa için eğik çizgi ayırıcısına izin verir:

<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
  <div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>

opacity: 0, visibility: hidden ve display: none

Üçü de öğeleri gizler ancak bunu farklı biçimlerde yapar:

  • opacity: 0 — görünmez olur ancak yer kaplamaya ve tıklanabilir olmaya devam eder
  • visibility: hidden — görünmez olur, yer kaplar ancak tıklanamaz
  • display: none — yerleşimden tamamen kaldırılır

opacity ile Geçiş

opacity, GPU üzerinde birleştirildiği için canlandırılması en düşük maliyetli CSS özelliklerinden biridir. Görünme ve kaybolma efektlerinde her zaman background-color yerine opacity geçişleri kullanılmalıdır.

<div class="modal visible">Fades in via opacity transition</div>

Saydam Arka Plan Deseni

Metni tamamen okunaklı tutarken bir öğeye yarı saydam bir arka plan vermek için background-color üzerinde rgba() kullanın:

<div class="glass-card">Glass effect card</div>

Kenarlık ve Kutu Gölgesinde Alfa

İnce, saydam efektler oluşturmak için border-color ve box-shadow içinde RGBA kullanın:

<div class="card">Card with alpha border &amp; shadow</div>

Erişilebilirlik Hatırlatması

Düşük opaklıktaki metin okunabilirliği azaltır ve WCAG renk karşıtlığı gereksinimlerini karşılamayabilir. Metinde saydamlık kullanırken karşıtlık oranlarını her zaman doğrulayın. Normal metin için en az 4.5:1 oranı sağlayın.

Hızlı Kontrol

Bir öğede opacity: 0.3 ayarlanmıştır. İçindeki metne ne olur?

Özet

opacity, bir öğenin tamamını ve alt öğelerini saydamlaştırır. Alt öğeleri etkilemeden saydam renkler oluşturmak için rgba() veya hsla() kullanın. Opaklık geçişleri GPU ile hızlandırılır ve yüksek performans sağlar. Metinde saydamlık kullanırken karşıtlık oranlarını her zaman kontrol edin.

Sıkça Sorulan Sorular

“Opaklık ve RGBA Saydamlığı” dersi ücretsiz mi?

Evet — “Opaklık ve RGBA Saydamlığı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Opaklık ve RGBA Saydamlığı” dersinde ne öğreneceğim?

opacity özelliğini ve rgba() renk değerlerini kullanarak öğelerin saydamlığını denetleyin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Opaklık ve RGBA Saydamlığı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Renk Değerleri: Adlandırılmış, Hex, RGB, HSL
  2. Arka Plan Rengi ve Görseli
  3. Degradeler: Doğrusal ve Radyal
  4. Opaklık ve RGBA Saydamlığı
← CSS Academy Sayfasına Dön