Site şuan tasarım halindedir duyurular falan en kısa zamanda yenilenecektir.

Site şuan tasarım halindedir duyurular falan en kısa zamanda yenilenecektir.2

Site şuan tasarım halindedir duyurular falan en kısa zamanda yenilenecektir.3

Buraya Konunuz ile İlgili Yazılar Yazınız.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Buraya Konunuz ile İlgili Yazılar
Buraya Konunuz ile İlgili Yazılar Yazınız.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Buraya Konunuz ile İlgili Yazılar
Buraya Konunuz ile İlgili Yazılar Yazınız.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Yazabilirsiniz.Buraya Konunuz ile İlgili Yazılar Buraya Konunuz ile İlgili Yazılar

Taklit ediyorsanız değil , Taklit Ediliyorsanız Birşeyler Başarmışsınızdır !

Css'De Opacity



Ö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ü..

Hakkımızda

Ana Sayfa

Galeri

Hızlı Erişim
Buraya Hakkınızda Kısa bir Bilgi Yazabilirsiniz.Buraya Hakkınızda Kısa bir Bilgi Yazabilirsiniz.Buraya Hakkınızda Kısa bir Bilgi Yazabilirsiniz. Buraya Hakkınızda Kısa bir Bilgi Yazabilirsiniz. Buraya Hakkınızda Kısa bir Bilgi Yazabilirsiniz.
 
 
 
 
© 2016 Can Çetinkaya | Tüm Hakları Saklıdır | Bu Blogtaki Yazılar Şahsımıza Aittir, Kaynak Gösterilmeden Kullanılması Halinde Gerekli İşlemler Yapılacaktır Bugünkü Hit: 14 | Klik:49

Tema:

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=