Gün geçtikçe internet üzerindeki teknolojiler de değişiyor, gelişiyor. Bunlardan en güzeli ve en kullanışlısı son zamanlarda keşfettiğimin transparan resimlerin sitede gösterilmesi. Bu durum önceden de GIF ile oluyordu. GIF, tek bir rengi şeffaf hale gelebiliyordu.
Ancak son zamanların gözde resim formatı olan PNG sayesinde gölgeli resimleri sitenizde kullanabiliyorsunuz. PNG dosyalarını hazırlamak için ben Fireworks kullanıyorum. Şeffaf olarak görseli hazırladıktan sonra CSS dosyasında yapılacak bir iki ilave ile resimler sorunsuz olarak gösterilecektir.
Eklenmesi gereken CSS kodu:
[css].golgeliresim {
width: 200px;
height: 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’golgeli_resim.png’ mce_src=’golgeli_resim.png’);
background: url(golgeli_resim.png) top left no-repeat;
background: transparent url(golgeli_resim.png) !important; background: transparent;
}[/css]
Daha sonra bu CSS öğesini istediğiniz gibi, istenilen bir zemin rengiyle birlikte sayfanızda kullanabilirsiniz.
Bu kod, Internet Explorer’da bile sorunsuz olarak çalışıyor.
Örnek çalışmayı görmek için tıklayın.
