closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali Mengü | Kişisel Web Sayfasi

CSS de opacity Özelliği

Merhaba Arkadaslar , Bu Derste CSS de opacity özelliği nedir? Nasıl Kullanilir? Onu anlaticağım.

Öncelikle Nedir Bu Opacity ?
Photoshop veya baska Edit programlari kullananlar bilirler Opacity Özelliğini, Resime saydamlık verir.İşte yapıcağım işlem css kodlarini kullanarak resimlere veya katmanlara saydamlık özelliği vermek olucak.

Tüm tarayicilara uyumlumudur?
Şuana kadar bir tarayicida bir sorun çıkartmadı fakat,kodlarda İE de baska bir kod kullanmak gerekiyor.

Hemen başlayalim Örneklerimize ;

Gördüğünüz gibi elma resmi orjinal görüntüsündedir.Elma resmini yarı yarıya transparan yapalim.Bunun için IE de kullanicağımız kod filter:alpha(opacity=x) diğer tarayicilar için kullanicağımız kod opacity:x






Görünüm ;


Kod ;
<style type="text/css">
<!--
img[src="https://img.webme.com/pic/a/alimengu/elma.png"] {
       opacity:0.5;
       filter:alpha(opacity=50);
}
-->
</style>
<img src="https://img.webme.com/pic/a/alimengu/elma.png" alt="" width="120" height="133" _fcksavedurl="https://img.webme.com/pic/a/alimengu/elma.png">


Css kodlarini kullanirken İE tarayicisi için 0-100 arasinda değerler ; Diğer tarayicilar için 0.0-1.0 arasinda değerler verebiliriz.

Peki Hover Uygulayabilirmiyiz?
Tabiki uygulayabiliriz. Bu Kodun en sevdiğim yani burasidir. Aktif Menu Yapimindada kullanilabilir.
Örnek ; (Resmin üzerine gelin)

<style type="text/css">
<!--
img[src="https://img.webme.com/pic/a/alimengu/elma2.png"] {
       opacity:0.5;
       filter:alpha(opacity=50);
}

img[src="https://img.webme.com/pic/a/alimengu/elma2.png"]:hover {
       opacity:1;
       filter:alpha(opacity=100);
}
-->
</style>
<img src="https://img.webme.com/pic/a/alimengu/elma2.png" alt="" width="120" height="133" _fcksavedurl="https://img.webme.com/pic/a/alimengu/elma.png">



Son olarakta Katmanlarda Nasıl Kullanilir Onu İnceleyelim

Görünüm ;
Ali Mengü Elma Sever =)

Kodlar ;
<style type="text/css">
<!--
#elma {
    height: 200px;
    width: 400px;
    background-image: url(https://img.webme.com/pic/a/alimengu/elma2.png);
    background-repeat: no-repeat;
    border: 1px solid #000000;
    margin: auto;
}
.beyazkatman {
    height: 60px;
    width: 350px;
    margin-top: 40px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    opacity:0.8;
    filter:alpha(opacity=80);

}
-->
</style>
<div id="elma">
  <div class="beyazkatman">Ali Mengü Elma Sever =)</div>
</div>



Anlatim By AliMengü - Yorumlarinizi Bekliyorum
Etiketler ; cssde saydamlık özelliği,css de opacity,opacity nedir,opacity nasıl kullanilir





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::25.12.2012, 15:12 (UTC)
paylasmblogum
paylasmblogum
Kapalı

sagol

Yorumu gönderen::26.06.2011, 17:56 (UTC)
tasarim-dunya
tasarim-dunya
Kapalı

Herkes için yararlı oldugunu düsüorm hll olsn diorm baska bisede demiorm walla hll

Yorumu gönderen::26.06.2011, 09:14 (UTC)
dost13
dost13
Kapalı

Güzel Paylaşım (:

Yorumu gönderen::24.06.2011, 14:56 (UTC)
tasarimci-tr
tasarimci-tr
Kapalı

En çok işime yarayan paylaşımlarınızdan birisi teşekkür ederim başarılarınızın devamını dilerim...

Yorumu gönderen::24.06.2011, 10:49 (UTC)
alimengu
alimengu
Kapalı

teşekkür ederim

Yorumu gönderen::24.06.2011, 10:33 (UTC)
wwebw
wwebw
Kapalı

Ali Mengu Elma sever.O bir süper. Lan helal olsun.Çok güzel.Çok işime yarayacak.Süpersin.

Yorumu gönderen::23.06.2011, 21:43 (UTC)
alimengu
alimengu
Kapalı

Teşekkürler ikinizede

Yorumu gönderen::23.06.2011, 19:49 (UTC)
bs-platformu
bs-platformu
Kapalı

Çok güzel bir paylaşım ellerine sağlık

Yorumu gönderen::22.06.2011, 17:16 (UTC)
gokermuhammet
gokermuhammet
Kapalı

Çok yararlı



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugün toplam 19 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=