Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Yazılım Geliştirme
  • Projeler
  • Bu Konuda
Şimdi Ara

CSS ÖĞRENİYORUM (3. sayfa)

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
1 Misafir - 1 Masaüstü
5 sn
42
Cevap
2
Favori
3.925
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: önceki 123
Sayfaya Git
Git
Giriş
Mesaj
  • 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 >




  • 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



    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 >




    • 
Sayfa: önceki 123
Sayfaya Git
Git
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz, DH'yi kullanırken depoladığımız çerezlerle ilgili veri politikamıza gözatın.
Kabul Ediyorum