CSS/Eigenschaften/Hintergrundfarben und -bilder/linear-gradient()

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Für das gleichnamige SVG-Element siehe SVG/Farben/Verläufe.



linear-gradient()[Bearbeiten]

Mithilfe der Funktion linear-gradient können Sie einen linearen Farbverlauf als Hintergrundgrafik eines Elements erstellen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
#one   { background-image: linear-gradient(white, black); }
#two   { background-image: linear-gradient(42deg, transparent, blue); }
#three { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
<aside id="one">senkrechter Farbverlauf von weiß nach schwarz</aside>
<aside id="two">Farbverlauf mit Transparenz</aside>
<aside id="three">Regenbogen</aside>

Die Funktion erwartet folgende Argumente:

  • eine Angabe der Richtung des Verlaufs als Winkelmaß oder durch die Angabe einer Ecke (top right, bottom right, bottom left, top left) bzw. Seite des Elements (top, right, bottom, left) in Verbindung mit dem Schlüsselwort to.
Die angegebene Richtung ist die Ausbreitungsrichtung des Verlaufs.
Der Standardwert ist dabei to bottom = 180deg = 200grad = 3.1415rad
Der Winkel wird mathematisch negativ, also mit dem Uhrzeigersinn, gemessen (0deg = to top, 90deg = to right).
Der Scheitelpunkt des Winkels ist dabei der Mittelpunkt der durch background-clip festgelegten Hintergrundbox des Elements.
Beispiel ansehen …
aside {
   height: 100px;
   margin: 10px;
   display: inline-block;
}
.landscape    { width: 300px; }
.square       { width: 100px; }
.portrait     { width: 50px; }
.angle  aside { background-image: linear-gradient(45deg, red 50%, blue 50%); }
.corner aside { background-image: linear-gradient(to top right, red 50%, blue 50%); }
  • mindestens zwei „Color-Stop“-Angaben
Ein „Color-Stop“ besteht aus einer Farb- und einer Längenangabe und legt fest, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.
linear-gradient(red, green, red) = linear-gradient(red 0, green 50%, red 100%)
Auf die Angaben 0 und 100% kann grundsätzlich verzichtet werden, ggf. ebenso auf einen ersten und letzten Color-Stop.
linear-gradient(red 0, green 50%, red 100%) = linear-gradient(red, green 50%, red)
linear-gradient(red, red 25%, green 75%, green) = linear-gradient(red 25%, green 75%)
scharfe Übergänge erreicht man durch die Festlegung zweier Farben an einem Ort
Beispiel ansehen …
figure {
    border: 1px solid;
    display: inline-block;
    height: 200px;
    margin: 0 100px 2em 0;
    position: relative;
    width: 300px;
}
figcaption {
    bottom: -1.5em;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
#Deutschland {
    background-image: 
      linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
#Frankreich {
    background-image: 
      linear-gradient(to right, blue 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
#Congo {
    background-image: 
      linear-gradient(135deg, green 40%, #fbde4a 40%, #fbde4a 60%, red 60%);
}
#Namibia {
    background-image:
      url(http://wiki.selfhtml.org/images/e/e5/Stern_Namibia_Flagge.svg),
      linear-gradient(147deg, darkblue 40%, white 40%, white 42%, red 42%, 
                              red 58%, white 58%, white 60%, green 60%);
    background-position: 20px 20px, center;
    background-repeat: no-repeat, no-repeat;
    background-size: 70px, auto;
}
<h2>Länderflaggen mit CSS</h2>
<figure id="Deutschland">
   <figcaption>Deutschlandflagge</figcaption>
</figure>
<figure id="Frankreich">
   <figcaption>Tricolore</figcaption>
</figure>
Beachten Sie: Solche Grafiken sollten besser mit SVG umgesetzt werden.

So können Grafiken durch CSS erzeugt werden, ohne dass es zu zusätzlichen http-requests kommt. In Kombination mit radial-gradient und den Pseudoelementen ::after und ::before sind der Phantasie keine Grenzen gesetzt. Andererseits werden diese Grafiken errechnet, sodass man also unter Umständen den Seitenaufbau verlangsamt.

Empfehlung: für das Zeichnen von Flaggen ist das SVG-Format prädestiniert:

Anwendungsbeispiel Unterstreichungen[Bearbeiten]

Für Unterstreichungen gibt es die Möglichkeit, die Eigenschaft text-decoration zu verwenden oder dem entsprechenden Element eine untere Rahmenlinie zu geben. Allerdings erlauben weder text-decoration-style noch border-style eine individuelle Gestaltung der Linie. Vorgesehen ist eine Eigenschaft border-clip, sie wird derzeit (November 2016) noch von keinem Browser unterstützt. Allerdings wären Strichpunktlinien damit auch nicht möglich.

Beispiel ansehen …
h2 {
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-bottom: 3px;
}
h2.kurz {
  background-size: .5em 2px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
}
h2.lang {
  background-size: 1em 2px;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
}
h2.länger {
  background-size: 1.5em 2px;
  background-image: linear-gradient(to right, currentColor 75%, transparent 50%);
}
h2.strichpunkt {
  background-size: 20px 2px;
  background-image: linear-gradient(to right, currentColor 10px, transparent 10px,
                                              transparent 14px, currentColor 14px,
                                              currentColor 16px, transparent 16px);
}
h2.sos {
  background-size: 96px 2px;
  background-image: linear-gradient(to right, currentColor 2px, transparent 2px,
                                              transparent 6px, currentColor 6px,
                                              currentColor 8px, transparent 8px,
                                              transparent 12px, currentColor 12px,
                                              currentColor 14px, transparent 14px,
                                              transparent 18px, currentColor 18px,
                                              currentColor 28px, transparent 28px,
                                              transparent 32px, currentColor 32px,
                                              currentColor 42px, transparent 42px,
                                              transparent 46px, currentColor 46px,
                                              currentColor 56px, transparent 56px,
                                              transparent 60px, currentColor 60px,
                                              currentColor 62px, transparent 62px,
                                              transparent 66px, currentColor 66px,
                                              currentColor 68px, transparent 68px,
                                              transparent 72px, currentColor 72px,
                                              currentColor 74px, transparent 74px,
                                              transparent 96px);
}

Mit SVG haben Sie auch hier deutlich mehr Möglichkeiten.

repeating-linear-gradient()[Bearbeiten]

Sich wiederholende Farbverläufe können Sie mithilfe der Funktion repeating-linear-gradient() erreichen.

  • CSS 3.0
  • IE 10
  • Opera
  • Firefox
  • Safari
  • Chrome

Details: caniuse.com

Beispiel ansehen …
main {
  background-color: #8FBC8F;
  background-image:
    repeating-linear-gradient(transparent, transparent 30px, white 30px, white 32px),
    repeating-linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px);
  height: 85vh;
}
Es werden zwei Verläufe übereinandergelegt. (Siehe auch Verwenden mehrerer Hintergrundbilder)
Beachten Sie: Chrome ≤ 35≤ 35 Opera 15+15+ Browser mit der Blink-Rendering-Engine stellen dieses Beispiel fehlerhaft dar.

Denselben Effekt erreichen Sie auch durch die Kombination von background-size und background-repeat. Gegebenfalls muss die Höhe fest vorgegeben werden oder auf andere Einheiten wie vh bzw. vw ausgewichen werden.

Beispiel ansehen …
main {
  background-color: #8FBC8F;
  background-image:
    linear-gradient(transparent, transparent 30px, white 30px, white 32px), 
    linear-gradient(to right, transparent, transparent 30px, white 30px, white 32px);
  background-repeat: repeat-y, repeat-x;
  background-size: 100% 32px, 32px 100%;
  height: 85vh;
}
Beachten Sie:
Beispiel ansehen …
#one {
  background-image: repeating-linear-gradient(90deg, gold, blue);
}
#two { 
  background-image: repeating-linear-gradient(90deg, gold, blue 10%);
}
#three { 
  background-image: repeating-linear-gradient(90deg, gold, blue 5%, gold 10%);
}
  1. repeating-linear-gradient(gold, blue) = repeating-linear-gradient(gold 0 , blue 100%). Das heißt, es erfolgt lediglich eine Wiederholung des Verlaufs.
  2. Wenn Anfang und Ende des Verlaufs verschiedene Farben haben, so wird es einen scharfen Übergang geben, da die Verläufe einfach nur aneinander gereiht werden.
  3. Falls Sie mit prozentualen Längenangaben arbeiten, müssen Sie die Angaben durch die Anzahl der gewünschten Wiederholungen dividieren.

Weblinks[Bearbeiten]