CSS

'da bir değişken genişlikli gradiant dolgu oluşturma Şu anda sayfanın üst kısmında köşeden köşeye uyan bir üstbilgiye (WordPress'te, HTML anlamında) sahip olmak istediğim bir WordPress teması oluşturuyorum . En solu sabitlemek, sağ tarafında düz bir renkle dolu bir görüntü olacaktır. En sağa sabitlemek, sol tarafında düz bir renkle dolu bir görüntü olabilir.CSS

Yapmak istediğim, tarayıcı genişliğinden bağımsız olarak, soldaki renkten sol tarafındaki renge doğru sağa kaymayan bir gradyan ile aradaki boşluğu doldurmaktır. Bunu CSS ile yapmanın bir yolu var mı?

kaynak

2009-02-27 Yes - that Jake.

GIMP (bir piksel yüksek) bir görüntü olarak degrade fazlası ve yapmanın saf bir CSS yolu yoktur http://www.cssplay.co.uk/layouts/background.html

kaynak

2009-02-27 18:34:43 MarkusQ

bkz ancak bir çözelti kullanılarak CSS için yeterli genişliğe sahip bir arka plan resmi yapmaktır sahip olabileceğiniz en geniş ekran genişliği ve mevcut tarayıcı genişliğine uzanmasını sağlayın.

Tümüyle aynı renkse, GIF'de arka plan görüntüsü oluşturmak, daha şeffaf ve istediğiniz bir arka plan rengini ayarlamaktır.

Bkz. this veya this.

kaynak

2009-02-27 18:36:08 lpfavreau

Görüntü yokken bunu yapmanın bir yolu. Bunu bir hack olmak için düşünebilirsiniz, ancak işi bir şekilde yapar. Degradede gereken adım sayısını gerektiği gibi ayarlayın. Pencereyi doldurmak için otomatik olarak ölçeklendirmek istiyorsanız, daha fazla <b> öğelerini kullanın ve kenarlığı degrade adımlarından biri olarak kullanmayın. Ardından yüzde genişliklerini kullanarak <b> öğelerini boyutlandırın. İndirme boyutunu küçük tutmak istiyorsanız, degradeyi Javascript kullanarak bile oluşturabilirsiniz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    .grad b { 
     display: block; 
     float: left; 
     width: 16px; 
     height: 100%; 
     border-left-width: 16px; 
     border-right-width: 16px; 
     border-left-style: solid; 
     border-right-style: solid; 
     border-left-color: #FF0000; 
     background-color: #EE0011; 
     border-right-color: #DD0022; 
    } 
    .grad b+b { 
     border-left-color: #CC0033; 
     background-color: #BB0044; 
     border-right-color: #AA0055; 
    } 
    .grad b+b+b { 
     border-left-color: #990066; 
     background-color: #880077; 
     border-right-color: #770088; 
    } 
    .grad b+b+b+b { 
     border-left-color: #660099; 
     background-color: #5500AA; 
     border-right-color: #4400BB; 
    } 
    .grad b+b+b+b+b { 
     border-left-color: #3300CC; 
     background-color: #2200DD; 
     border-right-color: #1100EE; 
    } 
    .grad b+b+b+b+b+b { 
     border: none; 
     background-color: #0000FF; 
    } 
    .grad { 
     float: left; 
     font-size: 100%; 
     height: 30px; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="grad"> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
    </div> 
    </body> 
</html>

kaynak

2009-02-27 19:15:11

cevap

İlgili konular