Webmaster Destek Forumu

Yarınların için bir şey yapmazsan, ölene dek Alarm kurmaya mahkumsun !
İletişim
  • Duyuru; Sizde hemen Üye Olup Sorunuzu Sorabilirsiniz, katılım ve kullanım tamamen Ücretsizdir!

Mybb Logo'ya Opacity Özelliği Eklemek [Ders]

VampiR

Forum Üyesi
Katılım
18 Eki 2022
Mesajlar
20
Puanları
0
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 :


Kod:panoya kopyala

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:panoya kopyala

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.
 
Üst