Resimlere ve Yazılara Css İle Saydamlık Vermek

CSS’nin nimetlerinden faydalanarak resim ve yazılara saydamlık vermek mümkün. Bu işlemi çok basit bit kod ile yapacağız. Örneğin ilk olarak bir resim ele alalım.

<img src="https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png" />

Codex logomuzu ele aldık. Bu kodun içine

style="opacity:0.5;"

kodunu ekleyeceğiz ve sonuca bakacağız.

<img src="https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png" style="opacity:0.5" />

yukarıdaki kod ile codex logomuza %50 saydamlık verdik. Aşağıda da ilk halini ve saydam halinin ön izlemesini görüyorsunuz.

Önce                               Sonra

Konu başlığında resmimize css ile saydamlık vereceğimizi söylemiştik. Yukarıda resmin içine style kodunu ekleyerek yaptık. Şimdi bu işi css ile yapacağız. Bunun için ilk olarak resmimize bir css sınıfı atayacağız.

<style>
.codexlogo {
opacity:0.5;
}
</style>

Resmimiz için codexlogo adında bir css sınıfı oluşturduk ve %50 saydamlık verdik. Şimdi img kodumuzun için class=”codexlogo” kodunu ekleyelim.

<img class="codexlogo" src="https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png" />

Kodlarımızı bir araya toplayalım ve ön izlemesini görelim.

<style>
.codexlogo {
opacity:0.5;
}
</style>
<img class="codexlogo" src="https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png" />

Kodlarımız bu şekilde, ön izlemesi ise aşağıdaki gibidir.

Şimdi yazılarımıza saydamlık vereceğiz. İlk olarak yazımızı bir div kodu içine alıyoruz.

<div>Aşk; kelime değil bir cümledir. Kurmak içinse, özneyle yüklem değil, iki yürek gerekir.</div>

Şimdi bu div kodunun içine yukarıdaki resim örneğinde verdiğimiz gibi style=”opacity:0.5;” kodunu ekliyoruz.

<div style="opacity:0.5">Aşk; kelime değil bir cümledir. Kurmak içinse, özneyle yüklem değil, iki yürek gerekir.</div>

ve sonuç …

---

Önce

---

Sonra

---

Gördüğünüz gibi sonuç bu şekilde. Yukarıda verdiğimiz class=”codexlogo” kodunu aynı şekilde burada da kullanabilirsiniz. Ayrıca yazılarınızı sadece <div> kodu ile değil <font> kodu ile de yapabilirsiniz. Örnek;

<font style="opacity:0.5">Aşk; kelime değil bir cümledir. Kurmak içinse, özneyle yüklem değil, iki yürek gerekir.</div>

Gördüğünüz gibi bu yazımızda hem resme hem de yazıya saydamlık efekti verdik ve kullandığımız her iki yöntem de aynı sonucu verdi. Fakat 1. yöntem ile az kod kullanarak aynı etkiyi yakalamanız mümkün. İsterseniz hover kodunu kullanarak üzerine gelince resmin solmasını sağlayabilirsiniz. Bunun için opacity kodunu şu yazımızda verdiğimiz yöntemi uygulayarak kullanın.