Erstellen einer variablen Farbverlaufsfüllung in CSS

Ich baue gerade ein WordPress-Theme, das ich gerne eine Kopfzeile (im WordPress, nicht im HTML-Sinne) haben möchte, die von Ecke zu Ecke am oberen Rand der Seite passt . Die ganz linke Verankerung würde ein Bild sein, das auf der rechten Seite mit einer Vollfarbe gefüllt ist. Die ganz rechts verankern würde ein Bild sein, das auf der linken Seite mit einer Vollfarbe gefüllt ist.Erstellen einer variablen Farbverlaufsfüllung in CSS

Was ich tun möchte, ist das Füllen des Zwischenraumes, unabhängig von der Browserbreite, mit einem Gradiant, der nahtlos von der Farbe auf der linken Seite zur Farbe auf der rechten Seite übergeht. Gibt es eine Möglichkeit, dies über CSS zu tun?

Quelle

2009-02-27 Yes - that Jake.

Haben die Steigung als Bild in GIMP (ein Pixel hoch) und sehen http://www.cssplay.co.uk/layouts/background.html

Quelle

2009-02-27 18:34:43 MarkusQ

Es gibt keine reine CSS Art und Weise, dies zu tun, aber eine Lösung mit CSS ist ein Hintergrund-Bild von ausreichender Breite, um für die größte Bildschirmbreite, die Sie haben könnten, und die Ausdehnung auf die aktuelle Browserbreite.

Eine andere Möglichkeit, wenn es die gleiche Farbe ist, ist, ein Hintergrundbild in GIF zu erstellen, das mehr und mehr transparent wird und eine Hintergrundfarbe Ihrer Wahl setzt.

Siehe this oder this.

Quelle

2009-02-27 18:36:08 lpfavreau

Hier ist eine Möglichkeit, es ohne Bilder zu tun. Sie können dies als einen Hack betrachten, aber es macht die Arbeit in gewisser Weise erledigt. Passen Sie die Anzahl der Stufen im Verlauf nach Bedarf an. Wenn Sie möchten, dass es automatisch skaliert wird, um das Fenster auszufüllen, verwenden Sie weitere <b> Elemente und verwenden Sie den Rahmen nicht als einen der Farbverlaufsschritte. Dann die Größe <b> Elemente mit prozentualen Breiten. Sie können den Verlauf sogar mit Javascript erzeugen, wenn Sie die Downloadgröße klein halten möchten.

<!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>

Quelle

2009-02-27 19:15:11

Erstellen einer variablen Farbverlaufsfüllung in CSS

Antwort

Verwandte Themen