css ile saydamlık vermek

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.

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

kodunu ekleyeceğiz ve sonuca bakacağız.

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
codex logocodex logo

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.

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.

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

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.

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

ve sonuç …


Önce

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

Sonra

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

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;

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.