CSS Dersleri 31 - Opacity Kullanımı (Transparan Yapma)

CSS Dersleri 31 - Opacity Kullanımı (Transparan Yapma)


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Opacity konusunu öğreneceğiz.

CSS'de opacity özelliği, bir etiketin opaklığını veya saydamlığını belirtir. CSS'de bir etikete opaklık/saydamlık vermek için opacity özelliği kullanılır.

CSS Opacity Kullanımı

CSS'de opacity özelliği 0.0 - 1.0 arasında bir değer alabilir. Değer ne kadar düşükse, etiket o kadar saydamdır.

img {
  opacity: 0.5;
}

Opacity Hover Kullanımı

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Etiketlerde Opacity Kullanımı

Bir etiketin arka planına saydamlık eklemek için opacity özelliğini kullanırken, tüm alt öğeleri aynı saydamlığı devralır. Bu, tamamen saydam bir öğenin içindeki metnin okunmasını zorlaştırabilir:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Saydam Kutu</h1>
<p>Bir öğenin arka planına saydamlık eklemek için opacity özelliğini kullanırken, tüm alt öğeleri de saydam hale gelir. Bu, tamamen saydam bir öğenin içindeki metnin okunmasını zorlaştırabilir:</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (varsayılan)</p></div>

</body>
</html>

RGBA kullanarak şeffaflık

Yukarıdaki örneğimizde olduğu gibi alt öğelere opaklık uygulamak istemiyorsanız, RGBA renk değerlerini kullanın. Aşağıdaki örnek, metnin değil arka plan renginin opaklığını ayarlar:

RGB'yi bir renk değeri olarak kullanabileceğinizi CSS Renkler Bölümümüzden öğrendiniz. RGB'ye ek olarak, bir rengin opaklığını belirten alfa kanalı (RGBA) ile bir RGB renk değeri kullanabilirsiniz.

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.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(76, 175, 80);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>Saydam Kutu</h1>
<p>opacity kullanılarak:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<p>RGBA color kullanılarak:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Opaklık özelliğini kullanırken metnin nasıl saydamlaştığına ve arka plan rengine dikkat edin.</p>

</body>
</html>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla