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.

.ElementAdi{
	filter:alpha(opacity=40);
	}

.ElementAdi{

filter:alpha(opacity=40);

}

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.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
        <style>
		img{opacity:0.5; filter:alpha(opacity=50)}
        </style>
    </head>
  <body>
  <img src="y.jpg">
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

img{opacity:0.5; filter:alpha(opacity=50)}

</style>

</head>

<body>

</body>

</html>

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.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
    </head>
  <body>
  <img src="y.jpg" style="opacity:0.9; filter:alpha(opacity=90);" onMouseOut="this.style.opacity=0.2; this.filters.alpha.opacity=40">
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

</head>

<body>

</body>

</html>

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.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
        <style>
		img{opacity:0.5; filter:alpha(opacity=50)}
		img:hover{ opacity:1; filter:alpha(opacity=100);}
        </style>
    </head>
  <body>
  <img src="y.jpg">
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

img{opacity:0.5; filter:alpha(opacity=50)}

img:hover{ opacity:1; filter:alpha(opacity=100);}

</style>

</head>

<body>

</body>

</html>

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

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
        <style>
		div{
			width:600px;
			height:10em;
			background:url(y.jpg);
			font-size:30px;
			font-weight:bold;
			color:white;
			opacity:0.2; 
			-moz-opacity:0.2; 
			filter:alpha(opacity=20);
			padding:100px;
			box-sizing:border-box;
			}
		div:hover{
			opacity:1;
			filter:alpha(opacity=100)
			}
        </style>
    </head>
  <body>
  <div>
  	Çağlar hoca ile CSS dersleri.
  </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

div{

width:600px;

height:10em;

background:url(y.jpg);

font-size:30px;

font-weight:bold;

color:white;

opacity:0.2;

-moz-opacity:0.2;

filter:alpha(opacity=20);

padding:100px;

box-sizing:border-box;

}

div:hover{

opacity:1;

filter:alpha(opacity=100)

}

</style>

</head>

<body>

<div>

Çağlar hoca ile CSS dersleri.

</div>

</body>

</html>

ÖRNEK 2
Fare üzerine gittiğinde

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
        <style>
		div{
			width:600px;
			height:10em;
			font-size:30px;
			font-weight:bold;
			color:#000;
			box-sizing:border-box;
			position:relative;
			
			}
		div p{ position:absolute; top: 100px; left: 150px;}
		div img{
			-moz-opacity:0.2;
			opacity:0.2;
			filter:alpha(opacity=20);
			}
		div:hover p{ color:white; }		
		div:hover img{
			opacity:1;
			filter:alpha(opacity=100);
			}
        </style>
    </head>
  <body>
  <div>
  <img src="y.jpg">
  	<p>Çağlar hoca ile CSS dersleri.</p>
  </div>
  </body>
</html

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

div{

width:600px;

height:10em;

font-size:30px;

font-weight:bold;

color:#000;

box-sizing:border-box;

position:relative;

}

div p{ position:absolute; top: 100px; left: 150px;}

div img{

-moz-opacity:0.2;

opacity:0.2;

filter:alpha(opacity=20);

}

div:hover p{ color:white; }

div:hover img{

opacity:1;

filter:alpha(opacity=100);

}

</style>

</head>

<body>

<div>

<p>Çağlar hoca ile CSS dersleri.</p>

</div>

</body>

</html

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

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS TABLO ÖZELLİKLERİ</title>
        <!-- Çağlar BOSTANCI -->
        <style>
		div{
			width:640px;
			height: auto;
			font-size:30px;
			font-weight:bold;
			position:relative;
			color:white;}
		div p{ 
			margin:0px;
			width:100%;
			position:absolute; 
			top: 0px; 
			padding:40px 0px;
			display:none;
			background:#000;
			opacity:0.7;
			-moz-opacity:0.7;
			filter:alpha(opacity=50);
			text-align:center;	
			}
		div:hover p{ display:block;}
        </style>
    </head>
  <body>
  <div>
  <p>Çağlar hoca ile CSS dersleri.</p>
  <img src="y.jpg">
  	
  </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS TABLO ÖZELLİKLERİ</title>

<style>

div{

width:640px;

height: auto;

font-size:30px;

font-weight:bold;

position:relative;

color:white;}

div p{

margin:0px;

width:100%;

position:absolute;

top: 0px;

padding:40px 0px;

display:none;

background:#000;

opacity:0.7;

-moz-opacity:0.7;

filter:alpha(opacity=50);

text-align:center;

}

div:hover p{ display:block;}

</style>

</head>

<body>

<div>

<p>Çağlar hoca ile CSS dersleri.</p>

</div>

</body>

</html>

İlgili

CSS

CSS SAYDAMLIK (opacity) KULLANIMI

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

CSS SAYDAMLIK (opacity) KULLANIMI