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
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.

<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

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;

<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.

9 Yorum

  1. Cevap yaz

    Teşekkürler güzel bir özellik olmuş

  2. Cevap yaz

    Logo’da kullanılabilir bir özellik. Kodlarda bir sorun olduğu da gözükmüyor. Güvenle kullanabilirsiniz.

    • Cevap yaz

      Bir sıkıntı olursa yazmaktan çekinme Hakan ben ve Nurettin gerekli düzenlemeyi ve açıklamayı yapmak için buralarda olacağız :)

  3. Cevap yaz

    Css nin gücü.. :) css ile herşey yapılabiliyor artık..bunlarla sınırrlı değil..İyice kavramak lazım teşekkürler bu yazı için :)

    • Cevap yaz

      Kesinlikle Css ile yapılacaklar neredeyse sınırsız denilecek kadar çok.

  4. Cevap yaz

    Teşekkür ederim. 1-2 gündür bu kodu arıyordum bulamıyordum logomda kullanacağım :)

    • Cevap yaz

      Güzel günlerde kullan Kazım

  5. Cevap yaz

    Bunu blogger’da nasıl yapıcaz peki 1 söylermisin.böyle tür şeyleri çok iyi gozukuyor sitelerde.

  6. Cevap yaz

    Css’de bir çok komut ile mükemmellikler ortaya çıkabiliyor “opacity” bu komutta onlardan bir tanesi ve çok işe yarıyor. Anlatım için teşekkür ederim.

Bir Cevap Bırakın

Your email address will not be published. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>