DENTASARIM | Tasarımın bizden!
Css ile efektler verin
Transparan Resim Yaratmak
CSS kullanarak kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.
CSS3'de yer alan opacity kodu resmin şeffaflık oranını ayarlamamızı sağlar:
KOD:
img { /* Transparanlık oranı 40% */ opacity: 0.4; /* IE8 ve aşağısındaki tarayıcılarda sorun çıkmaması için */ filter: alpha(opacity=40); }
Yukarıda dikkat edildiyse iki kez 40% olduğunu belirttik. Birinci opacity kodumuz tüm güncel tarayıcılar için geçerli. Ancak bu kod Internet Explorer 8 ve aşağısında görüntülenmez. Bu sorunu düzeltmek için IE8 ve aşağı browserların anlayacağı tarz ikinci bir kod yazdık: filter: alpha(opacity=40); Buradaki 40, %40 ı ifade eder.
Fareyle Resmin Transparanlığını Değiştirmek
KOD:
img.stil { opacity: 0.5; filter: alpha(opacity=50); }
img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }