CSS OPACİTY NEDİR?

Websitelerimize görsellik ve güzellik katmak için artık opacity vazgeçilemez bir komutdur. Css3'ün getirdiği nimetlerden birisi de opacity özelliğini kullanarak şeffaf görüntüler oluşturmak çok kolaydır. Css opacity özelliği opaklık/saydamlığını ayarlamak için kullanılır.

Opak: Donuk, mat şeffaf olmayan anlamına gelmektedir.

Saydam: İçinden ışığın geçmesine izin veren arkasındaki şeylerin görülmesine engel olmayan anlamına gelmektedir.

Yarısaydam: Işığı geçiren, fakat arkasındaki nesnelerin sınırlarını ve biçimini belirgin olarak göstermeyen (nesne)

Opaklık değeri "0"(sıfır) tamamen saydam anlamına gelir; "1"(bir) değeri ise tam opaklık anlamına gelir. Değeri 0.5 olan ise yarısaydam anlamına gelir.

Modern tarayıcılar ve eski tarayıcılara göre iki şekilde gösterilir.

Firefox, Safari, Chrome, Opera ve IE9 CSS Saydamlık


İşte tüm güncel tarayıcılarda CSS opaklık gösterimi

 
 p {
    opacity: 0.7;
   }
 

Yukarıdaki stil kuralı paragraf elemanı %70 opak (veya %30 saydam) yapacaktır.

Internet Explorer 8 ve daha düşük sürümlerde CSS opaklık


Internet Explorer 8 ve önceki sürüm, Bir elemanın şeffaflığını kontrol etmek için Microsoftun okunur bir özelliği olan "alfa filtreyi" destekler.

 
 p {
    filter: 'alpha(opacity=50)';  
	
    filter: alpha(opacity=50);  
   }
 

Yukarda ki belirtdiğimiz "50" ifadesi %50 saydam yap demektir.

Tüm Tarayıcı CSS opaklık


Yukarıda ki her iki adımları birleştirerek tüm tarayıcılar için kod oluşturabiliriz.

 p {
    opacity: 0.5; /* Modern tarayıcılar için Saydamlık * /
	
    filter: 'alpha(opacity=50)'; / * IE8 ve alt sürümler için /
	
    filter: alpha(opacity=50);  / * IE8 ve alt sürümler için /
   }

CSS SAYDAM RESİMLER


CSS'de opacity kullanarak saydam görüntüleri yapabilirsiniz.

Aşağıda üç aynı resim var; Aralarında tek fark onların saydam özellikleri vardır.

css opacity

RESİM ÜZERİNE GELİNCE SAYDAMLIK DEĞİŞSİN


Aşağıdaki örnek, kullanıcının bir resmin üzerine fare imlecini hareket ettirdiğinde resmin opacity değerinin değiştiğini gösteren uygulamadır.

ÖRNEK:

img{ opacity:0.5

     filter: 'alpha(opacity=50)';
	
     filter: alpha(opacity=50);   
   }

img:hover{ opacity:1

           filter: 'alpha(opacity=50)'; 
	
           filter: alpha(opacity=50);   
         }

HTML:


    
	
	
	
	

Opacity Etkiyi görmek için resimlerin üzerine fare imlecini getirin.

SAYDAM KUTU NASIL OLUŞTURULUR


CSS saydamlık özelliğini kullanarak saydam arkaplan kutular oluşturabilirsiniz;

css opacity

CSS'DE RGBA KULLANARAK SAYDAMLIK


RGBA CSS3'de yeni özellik olarak renk değerinin bir parçası alfa saydamlığı içeren bir renk belirtmek için yeni bir yol RGBA'yı tanıttı. RGBA Kırmızı, Mavi, Yeşil, Alpha kısaltmasıdır.

RGBA özelliği, bir rengin şeffaflığı ayarlamak için çok kolay bir yoldur.


div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

RGB değerleri rengi temsil eden ilk üç sayı (0-255), mavi (0-255) yeşil (0-255) kırmızı yani 0 ile 1 arasında dördüncü temsil alfa saydamlık değeri (0 renk tamamen saydam, 1 değeri opak) tam opak yapar.

RGBA renk opaklığını kontrol etme yeteneğinin olması ve nesnelere şeffaflık verebildiğimizin unutulmaması gerekir.

RGBA ile, bir elemanın metin rengi şeffaf halde ve bozulmamış arka plan bırakabilirsiniz.

css opacity

Yalnız metin renginin opak bırakılması ve arka planın sadece şeffaflığı değiştiren örnek:

css opacity

Eğer tek tek renklerin yerine RGBA kullanarak tüm elemanın saydamlığını kontrol edebilirsiniz. Ancak her zaman RGBA renkleri desteklemeyen tarayıcılar için bir geri dönüş rengini tanımlamak tavsiye edilir.

NOT : RGBA şeffaflık çocuk ( Alt ) elemanları etkilemez. RGBA alfa değeri, Elemanın tüm şeffaflığını ayarlar.

RGBA'DA BİR YEDEK RENK BELİRTME


Tüm tarayıcılar RGBA renkleri desteklemez. Ancak, desteklemeyen tarayıcılar için düz renk ya da saydam PNG görüntü olarak bir alternatif belirtilir.

 p {
    /*RGBA desteklemeyen web tarayıcıları için son çare olarak */
     background: rgb (0, 0, 0);
	 
    / * 0,5 donukluk ile RGBA * /
	
     background: RGBA (0, 0, 0, 0,5);
   }

Uyarı: Internet Explorer 8 ve önceki sürümleri RGBA renkleri desteklemez.

CSS OPACİTY KULLANARAK ÇOCUK(ALT) ELEMANLAR ETKİLENMEMESİ


Web sayfanıza yarı saydam nesne eklemek istiyorsanız Üç değişik yöntemiz vardır.

  • CSS opacity kullanma
  • CSS rgba kullanma
  • 24 bit png arkaplan oluşturma

Web sayfanızda CSS opacity kullanacaksanız biraz işiniz zorlaşabilir. Bir ana öğe 0.5, ayarlanmış bir opacity değeri varsa, temelde, onun tüm çocukları(Alt elemanları) bu opacity ayarı devralır. Şeffaflıktan alt elemanlarda etkilenir. CSS konumlandırma özelliği ile bu sorun aşılır; Ancak alt elemanlar bundan etkilenmemesi için ayrı ayrı CSS RGBA kullanmak daha kolaydır. CSS opacity kullanarak bir örnek verelim

ÖRNEK:

h3 {
    padding-top:30px;
	font-size: 1.5em;
	color:white;
	padding-left:90px;
}

h3.uste{
	position: relative;
	top:90px;
	z-index: 2; 
}

.bar {
	width:800px;
	height:100px;
	background-color:#966003;
	opacity: 0.5;
	
}

HTML KODLARI:


	

BU KUTU'DA METİN ŞEFFAFLIĞI DEVRALIR

BU KUTUDA METİN OPAK KALIR

Örnek için tıklayınız.

ŞEFFAF BORDER


CSS ile borderlerinizi şeffaf yapabilirsiniz.

ÖRNEK:

img{border:15px ridge; 

    border-color:rgba(138, 55, 10, 0.6); 
   }

HTML:

ev resmi

ÇIKTI:

ev resmi

ŞEFFAF METİN

CSS kullanarak şeffaf metinler yapabilirsiniz.

ÖRNEK:

     
	h1{position:relative; 
	   bottom:230px;
	   left:10px;
	   color:rgba(255, 255, 255, 0.7); 
	   font-size:70px;
	   font-family:tahoma;}
	

HTML:

  

SATILIK EV

ÇIKTI:

ev resmi

SATILIK EV

Adınız

Eposta

Mesaj

9585

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE