03-30-2014, 08:15 AM
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
Okyanusta batan gemidir yalnızlık,
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.
