Kategorien
Stylesheets Webentwicklung

effektive Background-Gestaltung mit CSS

CSS Programming Image

Kurzbeschreibung

CSS bietet dem Webdesigner einen sanften Übergang zwischen zwei oder auch mehr Farben herzustellen.

CSS definiert drei Typen von gradients:.

  • Linear Gradients (von oben nach unten, von rechts nach links),
  • Radial Gradients (werden um das Zentrum gebildet),
  • Conic Gradients (rotieren um einen Mittelpunkt).

Hier einige Beispiele.

linearer Gradient

Das Beispiel zeigt eine linearen Gradienten von oben (rot) nach unten (gelb).

background-image: linear-gradient(red, yellow);

linearer Gradient multi color

Das Beispiel zeigt eine linearen Gradienten von links nach rechts mit mehreren Farben.

background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

radialer Gradient multi color

Das Beispiel zeigt eine radialen Gradienten von innen nach außen mit mehreren Farben.

background-image: radial-gradient(red, yellow, blue);

Das Beispiel zeigt eine konischen Gradienten im Uhrzeigersinn mit mehreren Farben.

background-image: conic-gradient(red 45deg, yellow 90deg, blue 240deg);

Von Michael

Diplom-Ingenieur
wohnhaft in München

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert