03-04-2013, Saat:16:04
CSS Opacity Özelliği İle Uygulama İşlemi
CSS 'de opacity özelliğini kullanarak bir ögenin saydamlığını değiştirebiliyoruz.
Bunun için kullanılacak kod şöyle :
Görüldüğü gibi bu kod 4 parçadan oluşuyor.
opacity: 0.5; En önemli parçadır. CSS 'deki mevcut saydamlık ayarıdır. Firefox, Safari ve Opera'da çalışmaktadır.
filter:alpha(opacity=50); Internet Explorer için bunu kullanmalısınız
-moz-opacity: 0.5; Netscape Navigator gibi eski Mozilla tarayıcıları için bunu kulanıyoruz.
-khtml-opacity: 0.5; Safari'nin eski versiyonları için de bunu kullanıyoruz.
Peki nasıl kullanabiliriz ?
Genelde bu kod bir ögenin imleç ile üzerine gelindiğinde aydınlık gelmesi gibi bir şekilde kullanılıyor.
Mesela :
NOT : Vermiş olduğum kod tüm tarayıcılarda desteklenmektedir.
Bunu logo da kullanmak isterseniz temanızın css kalıplarında .logo yu bulup } tagından önce ekleyebilirsiniz.
Demo :
CSS 'de opacity özelliğini kullanarak bir ögenin saydamlığını değiştirebiliyoruz.
Bunun için kullanılacak kod şöyle :
Kod:
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;Görüldüğü gibi bu kod 4 parçadan oluşuyor.
opacity: 0.5; En önemli parçadır. CSS 'deki mevcut saydamlık ayarıdır. Firefox, Safari ve Opera'da çalışmaktadır.
filter:alpha(opacity=50); Internet Explorer için bunu kullanmalısınız
-moz-opacity: 0.5; Netscape Navigator gibi eski Mozilla tarayıcıları için bunu kulanıyoruz.
-khtml-opacity: 0.5; Safari'nin eski versiyonları için de bunu kullanıyoruz.
Peki nasıl kullanabiliriz ?
Genelde bu kod bir ögenin imleç ile üzerine gelindiğinde aydınlık gelmesi gibi bir şekilde kullanılıyor.
Mesela :
Kod:
<html>
<head>
<title>CSS Opacity Ayarı</title>
<style type="text/css">
a.saydam img {opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;}
a.saydam img:hover {display: block;}
</style>
</head>
<body>
<a href="http://www.siteniz.com" class="saydam"><img src="http://www.siteadı.com/resim.jpg"></a>
</body></html>
Bunu yaptığımızda class 'ı saydam olarak tanımlanmış ve bağlantı verilmiş tüm resimler yarı saydam olacak, üzerine gelindiğinde tamamen mat olacak.NOT : Vermiş olduğum kod tüm tarayıcılarda desteklenmektedir.
Bunu logo da kullanmak isterseniz temanızın css kalıplarında .logo yu bulup } tagından önce ekleyebilirsiniz.
Demo :
Kod:
www.destek.mybb.com.tr
