Web tasarım kursumuzun,CSS derslerinin,15.bölümünü işlemekteyiz.Herkese başarılar dilerim.
CSS Opacity / Transparency (Opaklık ve Şeffaflık)
opacity elemanı bir öğenin opaklık seviyesini ayarlayabilmek için kullanılır.
Opak Resim
Opaklık değerleri 0.0 ile 1.0 arasında olabilir ve en düşük değer opaklığın en düşük olduğu derecedir.
web-tasarim-kursu-eforweb-yazılım-software
web-tasarim-kursu-eforweb-yazılım-software
web-tasarim-kursu-eforweb-yazılım-software
Şeffaf Hover Efekti
web-tasarim-kursu-eforweb-yazılım-software
Bu verilen kodların tam tersini uygulayarak opacity uygulanmamış olan bir fotoğrafın üzerine gelince hover elemanı sayesinde opacity değeri alarak görünümünü değiştirebileceğinizi söylememe gerek bile yoktur zaten sanırım.
Şeffaf Kutu
Bir öğeye opacity değeri verdiğiniz zaman o öğe saydamlaşır ancak o opacity vermiş olduğunuz öğenin içindeki diğer içerikler de opacity değeri almış olan öğe ile beraber sadamlaşmaktadır. Ve bu da o içeriklerin okunabilmesini ve anlaşılmasını zorlaştırmaktadır.
Bu gibi durumları engellemek için elbette ki CSS’in bazı numaraları var.
RGBA Değeri ile Şeffaflık
Yukarıda bahsettiğimiz gibi opacity verdiğiniz bir öğenin içerikleri de aynı değerde saydamlaşmaktadırlar.Bunu engellemek için RGBA saydamlık özelliklerini kullanırız.
Geçmiş CSS derslerimizde öğrenmiş olduğunuz RGB değerlerini renk değeri olarak kullanabilirsiniz.RGB’ye ek olarak CSS3’te RGBA değerleri vardır ve bu değerleri saydamlık vermek için kullanabiliriz.
web-tasarim-kursu-eforweb-yazılım-software
Ders içerisindeki HTML ve CSS örneklerini görebilmek için tıklayınız.
Web tasarım kursumuzun,CSS derslerinin,15.bölümünü işlemiş bulunmaktayız.Herkese başarılar dilerim.
