Yükleniyor...

CSS Opaklık (Opacity)

Düz renk, fotoğraf ve gradyanı biliyorsunuz. Bazen tüm öğenin daha yumuşak görünmesini istersiniz — soluk bir katman, devre dışı düğme, geri çekilen bir kart. Bu opacity işidir: kutunun tamamı ne kadar katı veya saydam görünsün.

opacity ne yapar?

opacity özelliği bir öğenin ne kadar opak olduğunu ayarlar. Değer 1 (tamamen katı, çoğu zaman varsayılan) ile 0 (tamamen görünmez) arasındadır. 0.5 gibi ondalıklar ortadadır. Önemli: opacity öğeye ve içindeki her şeye uygulanır — metin, kenarlık, arka plan ve çocuk kutular birlikte solar.

Opacity ve renk alfası

Bu iki fikir kolay karışır. Ayrı tutun.

📊 Opacity ve renk alfası

Araç Ne solar Tipik kullanım
opacity Tüm öğe (ve çocukları) Yumuşak katmanlar, devre dışı görünüm, sonra fade hareketi
rgba() / hsla() alfası Yalnızca o renk katmanı Saydam arka planlar, üstte katı metin
transparent anahtar sözcüğü Tamamen berrak bir renk değeri Özelliği silmeden kenarlık rengini gizlemek
visibility: hidden Görsel olarak gizler, düzen kalır Başka araç — burada derinleşmiyoruz

Tamamen katı ve yarı soluk

Önce aynı kart tasarımında 1 ile 0.5’i karşılaştırın.

Katı ve yarım opacity

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

Ne görmelisiniz?

.card-soft üzerinde hem arka plan hem metin yıkanmış görünür. Opacity harfleri bağışlamaz.

Çocuklar ebeveynle solar

Bir ebeveynin opacity: 0.4’ü varsa, iç içe başlık ve düğmeler kendi opacity: 1’leriyle «kaçamaz». Zaten soluk bir katmanın içinde boyanırlar.

Ebeveyn opacity çocukları yıkar

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* soluk ebeveyn içinde tam gücü geri getirmez */
}

Tasarım sonucu

Keskin metinli buzlu panel mi istiyorsunuz? Tüm öğeyi opacity ile değil, arka plan rengini rgba ile yumuşatın.

Yalnızca dolgu yumuşasın diye rgba tercih edin

Burada panel arka planı yarı saydamdır, metin tam güçtedir.

Yumuşak dolgu, katı metin

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* tam güçte metin */
padding: 1rem;
}

Soluk UI alışkanlığı

Yaygın kalıp: ikincil eylemlerde veya devre dışı kontrollerde opacity’yi biraz düşürmek — yine de okunur karşıtlık.

Soluk ikincil düğme

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Sıfır görünmez — yer kalabilir

opacity: 0 öğeyi görünmez yapar ama hâlâ düzen yeri kaplayabilir ve bağlama göre işaretçi olayları alabilir. Düzenden çıkarmak başka araçtır (display: none), yalnızca opacity değil.

Görünmez ama hâlâ akışta

css
CSS Code 
.ghost {
opacity: 0;
}

Kendiniz deneyin

  1. Aynı renkli iki kart; biri opacity: 1, biri opacity: 0.5.
  2. opacity: 0.4 ebeveyn içinde kalın satır — çocuğu tamamen «açamadığınızı» doğrulayın.
  3. Yumuşak görünümü background-color: rgba(…, 0.25) ve katı color ile yeniden kurun.
  4. İkincil düğmeyi opacity: 0.75 yapıp okunurluğu kontrol edin.
  5. İsteğe bağlı: bir kutuda opacity: 0 — düzende bıraktığı boşluğu görün.

Sık hatalar

  • Yalnızca saydam arka plan isterken ebeveyne opacity koymak
  • Soluk ebeveyn içinde opacity: 1 çocuğun tamamen katı görünmesini beklemek
  • Düzen yerini kaldırmak yerine opacity: 0 kullanmak
  • Metin karşıtlığı bozulacak kadar opacity düşürmek
  • transparent anahtar sözcüğünü opacity özelliğiyle karıştırmak

Özet

  • opacity tüm öğenin ne kadar saydam olduğunu ayarlar (0–1)
  • Çocuklar ebeveynle solar — içeriden tamamen kurtulamazlar
  • Katı metinli yumuşak arka planlar için rgba / hsla alfa tercih edin
  • Düşük opacity UI’yi sakinleştirebilir; erişilebilirliği düşünün
  • Görünmez (0) düzenden çıkarılmış demek değildir
  • Kart çifti ve rgba yeniden kurmayı fark bariz olana kadar pratik edin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders