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:


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

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:

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

HTML:


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

ÇIKTI:

ev resmi

SATILIK EV

Özlem Atız 24/04/2019

Merhaba hocam bende opacity ve rgba ikiside çikmıyor kodda .Koymam gereken bir kütüphane var mı?

yönetici 24/04/2019

Özlem, kodları doğru yazıyorsan çalışması lazım. Kodları belki tarayıcın tanımıyordur onun için en son chrome sürümü yükle dene. Tekrar çalışmazsa ön bellek bazen sorun yaratabiliyor shift+f5 tuşlarına basarak önbelleki atla.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

1531

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.