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;
Abdullah Tekin
PHP, Ajax ve JQuery'e son derece hakim bir programcı olarak bazı firma ve kuruluşlara aşağıdaki konular dahilinde freelance olarak hizmet veriyor: - Daima web standartlarını, SEO (Arama Motoru Optimizasyonu) ve güvenlik önlemlerini içeren projeler gerçekleştirmek, - Tasarımı yapılmış web sitelerini kusursuz bir şekilde web'e uyarlamak, - Özgün ve kodları kendisi tarafından yazılabilen PHP+Jquery+Ajax destekli modüller hazırlamak - Web stratejileri oluşturulması, - Web dahilinde sistemler kurmak, - Kontrol panelleri hazırlamak, - Hızlı, kullanılabilir, erişilir ve güvenliği üst düzeyde olabilecek web siteleri alt yapısını oluşturmak. İçerik Yönetim Sistemi (CMS), Haber Sistemi, E-Ticaret ve Okul Yönetim projelerini içine alan PHP konusundaki birikimlerini burada Sanalkurs.net üyelerine aktarıyor ve aynı zamanda Sanalkurs'un yazılım altyapısını şu an en üst düzeye taşımak için gece gündüz kodlarla boğuşuyor.
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