Cevap: CSS ÖĞRENİYORUM

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Projeler CSS ÖĞRENİYORUM

Bu konudaki kullanıcılar: 1 misafir

41
Cevap 3920
Tıklama 0
Öne Çıkarma

İlk Önceki

Cevap: CSS ÖĞRENİYORUM (3. sayfa)

Cevap Yaz

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Image Opacity (Opaklık) / Transparency (Saydamlık)

CSS ile saydam görüntüler oluşturmak kolaydır.

Not: CSS opacity özelliği W3C CSS3 önerilerinin bir parçasıdır.

Aşağıdaki örnekleri inceleyiniz.

Örnek 1

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  img 
  { 
  opacity:0.4; 
  filter:alpha(opacity=40); /* IE8 ve önceki sürümleri içindir */ 
  } 
  img:hover 
  { 
  opacity:1.0; 
  filter:alpha(opacity=100); /* IE8 ve önceki sürümleri içindir*/ 
  } 
  </style> 
  </head> 
  <body> 
   
  <h1>Resim Saydamlığı</h1> 
  <img src="http://www.w3schools.com/css/klematis.jpg" width="150" height="113" alt="klematis" /> 
  <img src="http://www.w3schools.com/css/klematis2.jpg" width="150" height="113" alt="klematis" /> 
   
  </body> 
  </html>

Örnek 2

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  div.background 
  { 
    width: 500px; 
    height: 250px; 
    background: url(http://www.w3schools.com/css/klematis.jpg) repeat; 
    border: 2px solid black; 
  } 
  div.transbox 
  { 
    width: 400px; 
    height: 180px; 
    margin: 30px 50px; 
    background-color: #ffffff; 
    border: 1px solid black; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
  } 
  div.transbox p 
  { 
    margin: 30px 40px; 
    font-weight: bold; 
    color: #000000; 
  } 
  </style> 
  </head> 
  <body><div class="background"> 
  <div class="transbox"> 
  <p>Saydam kutu içindeki örnek metin. 
  Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin.Saydam kutu içindeki örnek metin. 
  </p> 
  </div> 
  </div> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 14 Ekim 2012; 22:22:12 >
Bu mesaja 1 cevap geldi.

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Image Sprites

Çok sayıda resim içeren bir web sayfası yüklemek uzun zaman alabilir ve birden çok sunucu isteği oluşturur.

Image Sprites kullanarak sunucu istekleri sayısını azaltabilir ve bant genişliğinden tasarruf edebilirsiniz.

Üç ayrı görüntü kullanmak yerine bu görüntüyü kullanabilirsiniz.

CSS ile, resmin sadece ihtiyacımız olan bir parçasını kullanabiliriz.

Aşağıdaki örnek "img_navsprites.gif" adlı görüntüyü nasıl kullanabileceğimizi gösteriyor.Örneği blgisayarınızda denemk için yukarıdaki resmide kaydetmeniz gerekiyor.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  img.home 
  { 
  width:46px; 
  height:44px; 
  background:url(img_navsprites.gif) 0 0; 
  } 
  img.next 
  { 
  width:43px; 
  height:44px; 
  background:url(img_navsprites.gif) -91px 0; 
  } 
  </style> 
  </head> 
   
  <body> 
  <img class="home" src="img_trans.gif" width="1" height="1" /> 
  <br><br> 
  <img class="next" src="img_trans.gif" width="1" height="1" /> 
  </body> 
  </html>

Image Sprites-Navigasyon listesi oluşturma

Navigasyon listesi oluşturmak için ("img_navsprites.gif") adlı resmi kullanacağız.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  #navlist{position:relative;} 
  #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
  #navlist li, #navlist a{height:44px;display:block;} 
   
  #home{left:0px;width:46px;} 
  #home{background:url('img_navsprites.gif') 0 0;} 
   
  #prev{left:63px;width:43px;} 
  #prev{background:url('img_navsprites.gif') -47px 0;} 
   
  #next{left:129px;width:43px;} 
  #next{background:url('img_navsprites.gif') -91px 0;} 
  </style> 
  </head> 
   
  <body> 
  <ul id="navlist"> 
    <li id="home"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.w3schools.com/" data-href="http://www.w3schools.com/"></a></li> 
    <li id="prev"><a data-test="test" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="http://forum.donanimhaber.com/m_61893787/tm.htm" data-href="http://forum.donanimhaber.com/m_61893787/tm.htm"></a></li> 
    <li id="next"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"></a></li> 
  </ul> 
  </body> 
  </html>

Image Sprites - Hover Effect(vurgu)

Navigasyon lstesine hover efekti eklemek için aşağıdaki örneği inceleyebilirsiniz.

Bu örneği bilgisayarınızda denemek için

< Resime gitmek için tıklayın >

bu imajı kaydedin

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.w3schools.com/" data-href="http://www.w3schools.com/"></a></li>
<li id="prev"><a data-test="test" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="http://forum.donanimhaber.com/m_61893787/tm.htm" data-href="http://forum.donanimhaber.com/m_61893787/tm.htm"></a></li>
<li id="next"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66935295&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"></a></li>
</ul>
</body>
</html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 19 Aralık 2012; 8:41:58 >

Cevap Yaz

İlk Önceki

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme Projeler CSS ÖĞRENİYORUM