Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

CSS Saydamlık Efekti

Çok uzun bir aradan sonra tekrardan merhaba. Bu yaz benim için birçok konuda yoğun geçti. Bu yüzden yeni paylaşım ekleme fırsatı bulamadım. Ama yeni paylaşımlara başlıyorum.

İlk paylaşacağım konu CSS ile kutularımıza nasıl saydamlık vereceğimiz hakkında küçük bir bilgi.

Bu neden işimize yarayabilir?
Örneğin yeni bir sayfa yapıyorsunuz ve biraz daha farklı bir şey olmasını istiyorsanız bu yöntemi kullanarak göze hitap eden bir şeyler yapabilirsiniz.

Bu sayfada arka plan için bir resim/fotoğraf çalışması eklersiniz. Üzerine de bir kutu koyup, bu kutuyu saydamlaştırabilir böylece hem estetik açıdan güzel bir görüntü elde edersiniz hem de arka plan resminin bir parça görünmesini sağlayabilirsiniz.

Bunun için gerekli kodumuz:

.Saydamlik {

	filter:alpha(opacity=50);

	-moz-opacity:0.5;

	-khtml-opacity: 0.5;

	opacity: 0.5;

}

Bu kodu kullanmak için ilgili kutumuza class="Saydamlik" eklediğiniz zaman kutunuz şeffaf görünecektir.
5 rakamı saydamlık derecesini gösterir, ve rakam büyüdükçe kutunun saydamlığı azalacak bir başka deyişle arka plan resminin görünürlüğü azalacaktır.

CSSAyberk Atasay14 Eylül 2009, PazartesiEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

Ayberk Atasay
8 Eylül 2010, Çarşamba

@Kurtar
Dediğin gibi yapmak daha az zahmetli, fakat o zaman da arka planın saydam olmasından dolayı katman içine koyulan bütün objeler, yazılar da saydam efektini alıyor. Bu yüzden bu daha sağlıklı bir kullanım oluyor (;