Css ile Nesnenelerin Şeffaflığını Değiştirin..

, 30 Kasım Perşembe 2 Yorum

hepimiz yaptığımız sitelerde güzelliği ve estetikliği sağlamak adına çeşitli resimler kullanıyoruz... hatta ve hatta öyle siteler varki tek amacı sanatsal bir çalışma ortaya koymak olduğundan tamamı resimlerden oluşuyor.. benim bugün değineceğim konu ise resimlerin opaklık yada saydamlıklarını css ile değiştirmek ve güzel bir görüntü elde etmek olacak.. çoğu yerde görmüşsünüzdür soluk renklerde bir imaj vardır ve siz mouse'nin imleci ile üzerine geldiğinizde o renk değiştirir ve yerine aynı resmin kanlı canlı hali gelir ve oldukçada hoş olur.. hadi gelin şimdi bunu nasıl yapacağımıza bakalım..


ilk olarak elimizdeki herhangi bir imajın opacity değerini değiştiren birşeyler yazalım..

PLAIN TEXT
CSS:
  1. .seffaf
  2. {
  3. filter:alpha(opacity=50);
  4. -moz-opacity:.50;
  5. opacity:.50;
  6.  
  7. }

PLAIN TEXT
HTML:
  1. <span class="seffaf"><img xsrc="http://www.mandarindesign.com/images/v90.gif" width="50" height="50"></span>

bu yukarıda gördüğünüz kodlar ile resmin şeffaflık değerini 50 yapıyoruz.. gördüğünüz gibi oldukça kolay yazdığımız 3 satır css koduyla bu iş hallodu..

Şimdi yapacağımız örnekte ise bir MouseOver olayı yapıcaz yani başlangıçta şeffaf gözüken resmimiz üzerine gelince kanlı canlı bir hal alıcak... buyrun kodlara..

PLAIN TEXT
CSS:
  1. div.seffaf {width: 100%; background-color: silver;border:1px solid black; }
  2. div.canli {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

bu kod ile stillerimiz tanımladık..

PLAIN TEXT
HTML:
  1. <div class="seffaf" style="width:100px;height:119px;" onmouseover="this.className='canli'" onmouseout="this.className='seffaf'"><a xhref="http://www.mandarindesign.com/opacity.html"><img xsrc="http://www.mandarindesign.com/images/text.jpg" width="100" height="119" style="border:1px solid black;"></a></div>

Bu kod ile de linkimiz verdik yalnız bu olyı yapmak için azıcık ucundan JavaScript kullandık, onmouseover,onmouseout gibi javascript eventleri hakkında daha detaylı bilgi almak için buraya tıklayabilirsiniz..

Umarım işinize yarar, takıldığınız yerleri yorum yaparak yada iletişim formundan mesaj atmak suretiyle sorabilirsiniz...

Yazı Bu Adresten alınmış ve Üzerine kendi yorumlarımıda katarak türkçeleştirilmiştir..

Bu yazı 30 Kasım 2006, 18:21 tarihinde CSS, Web Geliştirme kategorisi altında yayınlandı. Bu yazıya yapılacak yorumlardan haberdar olmak için RSS 2.0 beslemesini kullanabilirsiniz. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.

“Css ile Nesnenelerin Şeffaflığını Değiştirin..” için 2 Yorum

  1. bleeenet  @ 30 Kasım 2006, 18:32

    iyi olmuş, teşekkürler :mrgreen: :mrgreen:

  2. h-yaman  @ 30 Kasım 2006, 23:39

    Hmmm hoş yazı genç eline sağlık. Bi zamanlar çok aramıştım bu kahrıolası makaleyi

Yorum Yapın