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.

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:

  <img src="bilgisayar.png"/>
  
  <img src="mario.png"/>
  
  <img src="kalem.png"/>

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'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.

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

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:

  <div class="bar">
    <h3>BU KUTU'DA METİN ŞEFFAFLIĞI DEVRALIR</h3>
  </div>
  
  <h3 class="uste">BU KUTUDA METİN OPAK KALIR</h3>
  <div class="bar">
  </div>
  

Ö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:

<img src="ev.jpg" alt="ev resmi" />

ÇIKTI:

Ş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:50px;
     font-family:tahoma;}
  

HTML:

  <div>
  
  <img src="ev.jpg" alt="" />
  <h1>SATILIK EV</h1>
  
  </div>

ÇIKTI:

4787

Gönder