SahraForumDizini

Genel Forum Sitesi
 
AnasayfaAnasayfa  SSSSSS  AramaArama  Kayıt OlKayıt Ol  Giriş yap  
Sayfayı FaceBook'ta Paylaş

Paylaş | 
 

 CSS Opacity yapımı

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
avatar

<b>Mesaj Sayısı</b> Mesaj Sayısı : 428
<b>Tecrübe</b> Tecrübe : 1091
<b>Rep Puanı</b> Rep Puanı : 29
<b>Kayıt Tarihi</b> Kayıt Tarihi : 07/07/11
<b>Yaş</b> Yaş : 26
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

MesajKonu: CSS Opacity yapımı   C.tesi 16 Tem. - 21:29:16

Ö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="http://img.webme.com/pic/a/alimengu/elma.png"] {
opacity:0.5;
filter:alpha(opacity=50);
}
-->
</style>
<img src="http://img.webme.com/pic/a/alimengu/elma.png" alt=""
width="120" height="133"
_fcksavedurl="http://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="http://img.webme.com/pic/a/alimengu/elma2.png"] {
opacity:0.5;
filter:alpha(opacity=50);
}

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

alıntıdır,içerik AliMengü ye ayittir
Sayfa başına dön Aşağa gitmek
http://sahra.forumdizini.com
 
CSS Opacity yapımı
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SahraForumDizini :: Webmaster :: CSS-
Buraya geçin: