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.

9 Yorum

  1. Onur - 3 Aralık 2013, 00:55 Cevap yaz

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

  2. Hakan Solmaz - 15 Aralık 2013, 18:34 Cevap yaz

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

    • Murat Dinç - 9 Ocak 2014, 19:42 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. samet erol - 9 Ocak 2014, 01:31 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 :)

    • Murat Dinç - 9 Ocak 2014, 19:42 Cevap yaz

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

  4. Kazım Kabul - 9 Ocak 2014, 19:03 Cevap yaz

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

    • Murat Dinç - 9 Ocak 2014, 19:40 Cevap yaz

      Güzel günlerde kullan Kazım

  5. Celali - 12 Ocak 2014, 22:15 Cevap yaz

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

  6. Genisarsiv - 19 Ocak 2014, 10:20 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.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*