CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS Transparanlık (opacity)



CSS kullanarak kolaylıkla resimlerinize şeffaflık (transparanlık) özelliği verebilirsiniz.

Transparan Resim Yaratmak

CSS3'de yer alan opacity kodu resmin şeffaflık oranını ayarlamamızı sağlar:



   img
   {
      /* Transparanlık oranı 40% */
      opacity: 0.4;

      /* IE8 ve aşağısındaki tarayıcılarda sorun çıkmaması için */
      filter: alpha(opacity=40);
   }
   

Yukarıda dikkat edildiyse iki kez 40% olduğunu belirttik. Birinci opacity kodumuz tüm güncel tarayıcılar için geçerli. Ancak bu kod Internet Explorer 8 ve aşağısında görüntülenmez. Bu sorunu düzeltmek için IE8 ve aşağı browserların anlayacağı tarz ikinci bir kod yazdık: filter: alpha(opacity=40); Buradaki 40, %40 ı ifade eder.

Fareyle Resmin Transparanlığını Değiştirmek




   img.stil { opacity: 0.5; filter: alpha(opacity=50); }

   img:hover.stil { opacity: 1.0; filter: alpha(opacity=100); }

   

Arkaplan Üzerinde Transparan Yazı

"Sevdiği kızı bırakıp gurbete gitmişti genç. Fakat aradan geçen yıllar sevgisinde hiç bir azalışa neden olmamıştı.Yıllar sonra döndügünde sevdiğinden şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti, yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne kadar vefasızmışsın?."

Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar akarken cevap verdi:" Ey sevgili! yüzünü görmek benim için uğruna ölünecek bir hasret iken, o şerefi postacıya mı bağışlasaydım?!"



HTML kodumuz ve stillerimiz:

<html>
<head>
<style type="text/css">
   div.background {
      width:400px;
      height:330px;
      background:url('th_4.jpg') repeat;
      border:2px solid black;
   }
   div.transbox {
      width:300px;
      height:260px;
      margin:30px 50px;
      background-color:#ffffff;
      border:1px solid black;
      opacity:0.6;
      filter:alpha(opacity=60);
   }
   div.transbox p {
      margin:30px 40px;
      font-weight:bold;
      color:#000000;
   }
</style>
</head>

<body>

   <div class="background">
   <div class="transbox">
   <p>"Sevdiği kızı bırakıp gurbete gitmişti genç.
      Fakat aradan geçen yıllar sevgisinde hiç bir azalışa
      neden olmamıştı.Yıllar sonra döndügünde sevdiğinden
      şu sözleri işitti:"A gönlüme hükmeden. Bunca yıl geçti,
      yolunu gözledim. Ne bir haber, ne bir mektup?!. Meğer ne
      kadar vefasızmışsın?."<br /><br />
      Bunun üzerine genç başını önüne eğdi, gözlerinden yaşlar
      akarken cevap verdi:" Ey sevgili! yüzünü görmek benim
      için uğruna ölünecek bir hasret iken, o şerefi postacıya
      mı bağışlasaydım?!"
   </p>
   </div>
   </div>

</body>
</html>
   

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014