Web sayfamız sadece phpBB 3.0.x sürümlerine destek vermektedir. Konu açmadan, ileti yazmadan önce lütfen site kuralları sayfamıza göz atınız.

CSS ile Transparan Resimler

Forum kuralları
Makale ve yazılardan sonra sadece makale hataları, güncellemeler ile ilgili iletiler yazabilirsiniz, lütfen makale konusuyla ilgili soru sormayınız yardım istemeyiniz.

İsteyen herkes makale ekleyebilir, eklenen makaleler yetkili tarafından incelenip onaylanırsa yayına alınacaktır. Eklediğiniz makalelerde telif haklarına uymak zorunludur.

Sitedeki tüm yazı ve makaleler Creative Commons Attribution-NonCommercial-NoDerivs 2.5 lisansı ile korunmaktadır. Alıntı şartları sayfasını mutlaka okuyunuz.

CSS ile Transparan Resimler

İleti RoyaLTurK 07 Haz 2008 15:02

Ç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 <head></head> tagları arasına yapıştırın

Kod: Tümünü seç
<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ı:

Kod: Tümünü seç
<a href="#" class="transparan"><img src="resim.jpg" border="0" id="foto"></a>



--------------------------------------------------------
Makale Hakkında

Yazar: Abdullah TEKİN
Kaynak:sodyum adresinden alınmıştır.
RoyaLTurK
kullanıcı
kullanıcı

İleti: 72
Kayıt: 01 Oca 2008 23:06
İsim: Tolga
HTML: İyi
CSS: Başlangıç
PHP: Orta
phpBB3: Orta
Sürüm: PhpBB3 3.0.1

Stil, tema ve grafik


Kimler çevrimiçi

Bu forumu görüntüleyenler: Kayıtlı kullanıcı yok ve 1 misafir

cron