RGBA ile Şeffaflık

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 28 / 76.

CSS'de, RGBA renkleri, bir rengin opaklığını belirtmek için bir alfa kanalı içeren RGB renklerinin bir uzantısıdır. RGBA; Red (Kırmızı), Green (Yeşil), Blue (Mavi) ve Alpha (Alfa) kelimelerinin kısaltmasıdır. Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır ve farklı şeffaflık derecelerine sahip renkler oluşturmanıza olanak tanır.

CSS'de RGBA renklerini kullanmak için temel sözdizimi şöyledir:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Örneğin:

p {
    color: rgba(255, 0, 0, 0.5); /* Yarı saydam kırmızı */
    background-color: rgba(0, 255, 0, 0.3); /* Yarı saydam yeşil */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Yarı saydam mavi */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah katman */
}

Görev

Kolay

Bir <h3> başlığı ve bir <p> paragrafı içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri şeffaflıkla stillendirmek için rgba() fonksiyonu ile birlikte background-color özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h3> öğesini hedefleyen bir CSS kuralı yazın. rgba(0, 0, 255, 0.5) (%50 şeffaflık) kullanarak arka plan rengini (background color) mavi (blue) olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. rgba(0, 128, 0, 0.3) (%30 şeffaflık) kullanarak arka plan rengini (background color) yeşil (green) olarak ayarlayın.

Kopya kağıdı

RGBA renkleri, opaklık için bir alfa kanalı ile RGB renklerini genişletir. Alfa parametresi 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında değişir.

Temel sözdizimi:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Örnekler:

p {
    color: rgba(255, 0, 0, 0.5); /* Yarı saydam kırmızı */
    background-color: rgba(0, 255, 0, 0.3); /* Yarı saydam yeşil */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam siyah katman */
}

Kendin dene

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>