CSS ile Transparan Resimler

Çoğu zaman Photoshop' ta yaptığımız bir işlem vardır. Opacity. Bu özellik sayesinde resimlerimize şeffaflık kazandırırız.

Çoğu zaman Photoshop' ta yaptığımız bir işlem vardır. "Opacity" Bu özellik sayesinde resimlerimize şeffaflık kazandırırız. Peki bu işlemi Web Tasarımda Photoshop' a gerek duymadan sadece CSS ile nasıl yapabiliriz. Bu derste yayınlanacak kodlar ile bu işlemin çok pratik şekilde yapıldığını ve ekstra olarak ise transparanı (Opacity=Şeffaflık) düşük bir resmin üstüne geldiğimizde nasıl eski haline döndüğünü göreceksiniz.

CSS Kodları: Sayfanızın

tagları arasına yapıştırın


<style type="text/css">

<!--



/* aşağıda 80 yazan bölüm yüzde bazında resmin alacağı şeffaflık değeridir */

.transparan img{

    filter:Alpha(opacity=80);

    -moz-opacity: 0.4;

}



.transparan:hover img{

    filter:Alpha(opacity=100);

    -moz-opacity: 1;

}



-->

</style>



Kullanım:


<a href="#" class="transparan"><img src="resim.jpg" border="0" id="foto"></a>


  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

CSS'nin gücünü artık gözümde büyütmeye başladım sanırım.. Müthiş bi olay bu CSS gerçekten.. Hem de standart olduğu için çok da fonksiyonel.. İnşallah ilerde mozilla da destekler bunu..
harika bir özelik css nasıl öğrenecez şimdi öğrenmek için çok heycanlıyım arkadaşlardan öğrenmek için bana yol göstermelerini sabırsızlıkla bekliyorum ilgilenecek arkadaşlara şimdiden çok ama çok teşekür ederim.
Merhaba gerçekten güzel kaynaklar oluşuyor bookmark listelerini başında olması gereken bi site olmuş. Emeği geçen herkeze teşekküler.
hakkikaten harika ve çok faydalı bir şey çok teşekkür ederim
Ellerine saglik.
css öğrenmek isteyen arkadaşlara fatih hayrioğlu nun kitabını öneriyorum pdf formatında ücretsiz download edilebiliyor. http://www.fatihhayrioglu.com/
Ufak bir ek yapmakta fayda var, opacity: 0.5; //CSS standart kullanımı filter:alpha(opacity=50); //IE için kullanım -moz-opacity: 0.5; //Netscape için kullanım -khtml-opacity: 0.5; //Safari için kullanım tabi hepsi aynanda kullanılmalı, tarayıcı ayıklar aradan.

Yukarı Git