CSS SAYDAMLIK (opacity) KULLANIMI

CSS SAYDAMLIK (opacity) KULLANIMI

Tarhi : 15-05-2017 06:48:49 | Yazar : ÇAĞLAR BOSTANCI

CSS SAYDAMLIK
Opaklık, donukluk, buzumsu anlamına gelen opacity, nesnelerini şeffaflık değerini belirler. CSS2 ve CSS3 için opacity olarak tanımlanmıştır. Opacity değeri kullanılarak nesnelerin (resim, yazı ve görseller gibi) şeffaflığı belirlenebilir. IE8 ve sonrası için opacity özelliğini desteklemektedir. İnternet Explorer ve öncesi için opacity tanımlaması aşağıdaki gibi yapılmaktadır.

Opacity değerleri 0 ile 1 arasında olan bir değer içerebilir. Sıfır değeri nesneyi tamamen şeffaf yapar. Yani nesne görünmez. Bir diğeri ise nesnenin esas görünen üst sınır değeridir. Yani nesne olduğu gibi görünür.   IE8 ve öncesi için opacity değeri filter:alpha(opacity=90)şeklinde 0 ile 100 arasında değer alır.

Javascript ile Opacity(Saydamlık)
Bir nesnenin saydamlık durumu ile ilgili dinamik değişim için CSS veya JavaScript kullanılabilir. CSS bir ölçüde bu işi fare hareketinin nesne üzerine gelmesi, ya da ayrılması ile gerçekleştirebiliyor. Opacity asıl gücünü javascript ile gerçekleştirmektedir.

Hover Pseudo Sınıfı ile Saydamlık Etkisi
Div elementinin içeriği ilk etapta yüzde 20 onranında şeffaflık değeri ile tanımlanır. Div elmentine hover özelliği eklendiğinde ve face imleci hover özelliğinin uygulandığı kısma geldiğinde yüzde yüz oranında bir şefaflık değeri verilerek örnek uygulamada kullandığımız metnin şeffaflık özelliği dinamik olarak değitirilebilmektedir.

Metin ve Resilerin Birlikte Kullanılması
Bu uygulamada hem resime hemde div içerisindeki metinlerin opacity durumunu değiştirmeyi yapacağız.

ÖRNEK 2
Fare üzerine gittiğinde

opacity özelliği ile fare üzerine gelince açıklama yapma

 

Reklam Alanı