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.