Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3/5 yorum 0 yorum yazar Hakan Taşan tarih 22 Kasım 2013

CSS3'ün getirdiği yeniliklerden birisi de opacity özelliğini kullanarak transparan (saydam) resimler oluşturmak. Artık diğer resim programlarını kullanmadan CSS3 ile direkt olarak resimlerin transparanlık değerlerini, mouse ile resmin üzerine gelince saydamlaşması gibi bazı ayarları yapabileceğiz.

Syntax

opacity:0.4; // IE9, Firefox, Chrome, Opera, Safari için
filter:alpha(opacity=40); // IE8 ve daha eski sürümleri için

 

Kullanımı

IE9 , Firefox, Chrome, Opera ve Safari için opacity:x; kullanılır. x yani transparanlık değeri 0.0 - 1.0 arası değer alabilir. 0'a yaklaştıkça daha saydam görünüş oluşur.

IE8 ve daha eski sürümler için filter:alpha(opacity=x); kullanılır. x yani transparanlık değeri 0 - 100 arası değer alabilir. 0'a yaklaştıkça daha saydam görünüş oluşur.

Örnek 1)

Bu örnekte; solda normal bir resim ve sağda transparan bir resim var.

img
{
    opacity:0.4;
    filter:alpha(opacity=40);
}

 

Örnek 2)

Bu örnekte; transparan 2 resim var. Mouse resmin üzerine gelince normal rengine dönüyor, resmin üzerinden uzaklaşınca transparan oluyor.

img
{
    opacity:0.4;
    filter:alpha(opacity=40);
}
img:hover
{
    opacity:1.0;
    filter:alpha(opacity=100);
}

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış