Css Opacity Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te opacity özelliği nedir, neden kullanabiliriz 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.

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

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

css-dersleri-opacity-kullanimi-1

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.

css-dersleri-opacity-kullanimi-2

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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 20 – Border Radius Kullanımı

Sonraki : Css Dersleri 22 – Text Shadow Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +