Bu yazımızda Css’te Opacity özelliği nedir?, Nasıl kullanılır? onu öğreneceğiz. Opacity özelliği ile Html etiketlerine şeffaflık verebiliriz. Bu özellik 0 ile 1 arasında bir değer alır.
Eğer değer 1 ise hiç şeffaflık uygulanmamış yani orjinal hali demektir.
1’den 0’a doğru değer azaldıkça şeffaflığı artar ve değer 0 olduğunda görünmez hale gelir.
Önemli IE8 ve daha eski versiyonlarında, opacity özelliğinin problemsiz çalışması için şu kodu da eklememiz gerekiyor.
Örneğin div etiketinin opacity değerine 0.4 vereceksek, parantez içerisindeki değer 10 katı yani 40 olacak şekilde verilmeli.
|
1 2 3 4 5 6 |
div{ opacity: 0.4; filter: alpha(opacity=40); /* IE8 ve daha eski versiyonları için */ } |
Örneğimizde 5 adet div etiketi oluşturup, opacity değerini 1’den 0’a doğru düşürelim ve tarayıcıdaki görünümlerini inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<style> div { width: 200px; height: 40px; background-color: cornflowerblue; padding:30px; margin:10px; } #box1{ opacity:1; filter: alpha(opacity=100); } #box2{ opacity:0.8; filter: alpha(opacity=80); } #box3{ opacity:0.6; filter: alpha(opacity=60); } #box4{ opacity:0.4; filter: alpha(opacity=40); } #box5{ opacity:0.2; filter: alpha(opacity=20); } #box6{ opacity:0; filter: alpha(opacity=0); } </style> <div id="box1">opacity 1</div> <div id="box2">opacity 0.8</div> <div id="box3">opacity 0.6</div> <div id="box4">opacity 0.4</div> <div id="box5">opacity 0.2</div> <div id="box6">opacity 0</div> |
Gördüğünüz gibi opacity değeri azaldıkça şeffaflığı da artıyor.
Burda dikkat etmemiz gereken bir yer var. Biz div’e şeffaflık verdik ama div ile beraber içindeki yazılarda opacity değerinden etkileniyor. Hatta opacity değeri 0 olan div’in yazısı hiç görünmüyor.
Eğer sadece div’e şeffaflık verip içindekiler bundan etkilenmesin istiyorsanız, opacity yerine background-color özelliğini kullanıp değerini rgba olarak verebilirsiniz. Bildiğiniz gibi rgba renk kodlarının sonunda opacity değeri veriyoruz.
Şimdi aynı örneği bu şekilde yapıp tarayıcıda inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<style> div { width: 270px; height: 40px; padding:20px; margin:10px; } #box1{ background-color:rgba(100,149,237,1); } #box2{ background-color:rgba(100,149,237,0.8); } #box3{ background-color:rgba(100,149,237,0.6); } #box4{ background-color:rgba(100,149,237,0.4); } #box5{ background-color:rgba(100,149,237,0.2); } #box6{ background-color:rgba(100,149,237,0); } </style> <div id="box1">background-color:rgba(100,149,237,1);</div> <div id="box2">background-color:rgba(100,149,237,0.8);</div> <div id="box3">background-color:rgba(100,149,237,0.6);</div> <div id="box4">background-color:rgba(100,149,237,0.4);</div> <div id="box5">background-color:rgba(100,149,237,0.2);</div> <div id="box6">background-color:rgba(100,149,237,0);</div> |
Bu sefer vermiş olduğumuz şeffaflıktan sadece div etiketi etkilendi. İçerisindeki yazıların etkilenmediğini görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
