CSS Opacity / Transparency (Opaklık ve Şeffaflık)

Web tasarım kursumuzun CSS derslerine opaklık ve şeffaflıkla devam ediyoruz. Herkese başarılar dilerim.

opacity özelliği bir öğenin opaklık (saydamlık) seviyesini ayarlamak için kullanılır.

Opak Resim

Opaklık değerleri 0.0 ile 1.0 arasında olabilir. Değer küçüldükçe öğe daha saydam olur: 0 tamamen görünmez, 1 ise tamamen opaktır.

opacity: 0.2

opacity: 0.5

opacity: 1 (varsayılan)

img {
    opacity: 0.5;
}

Not: Bu dersin eski hâlinde Internet Explorer 8 ve öncesi için filter: alpha(opacity=50); satırı da vardı. Bu tarayıcılar artık kullanılmadığından bu satıra gerek yoktur.

Şeffaf Hover Efekti

Aşağıdaki örnekte resim yarı saydam görünür; fare üzerine geldiğinde tamamen opak hâle gelir.

img {
    opacity: 0.5;
}

img:hover {
    opacity: 1.0;
}

Bu kodların tam tersini uygulayarak, opaklığı tam olan bir fotoğrafın üzerine gelindiğinde :hover sayesinde saydamlaşmasını da sağlayabilirsiniz.

Şeffaf Kutu

Bir öğeye opacity değeri verdiğinizde o öğe saydamlaşır; ancak öğenin içindeki tüm içerikler de onunla birlikte saydamlaşır. Bu da içeriklerin okunmasını ve anlaşılmasını zorlaştırır.

Bu gibi durumları önlemek için elbette CSS’in bazı çözümleri var.

RGBA Değeri ile Şeffaflık

Yukarıda bahsettiğimiz gibi opacity verdiğiniz bir öğenin içerikleri de aynı oranda saydamlaşır. Bunu önlemek için RGBA renk değerlerini kullanırız.

Bu <div> öğesine opacity verildi; içindeki yazı da saydamlaştı.

Bu <div> öğesine RGBA arka plan verilerek saydamlaştırıldı ve içerikler bu saydamlıktan etkilenmedi.

Geçmiş CSS derslerimizde öğrendiğiniz RGB değerlerini renk değeri olarak kullanabilirsiniz. RGB’ye ek olarak CSS3’te RGBA değerleri vardır; dördüncü değer (alfa) 0 ile 1 arasında saydamlığı belirler.

div {
    background: rgba(76, 175, 80, 0.3);
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.