Kategorien
Stylesheets Webentwicklung

Tolle Backgrounds mit :gradient

CSS Programming Image

Man muss zwischen zwei Arten von Farbverläufen unterscheiden:

Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben

background:-moz-linear-gradient(top,#fff,#adf);/* Firefox */

background:-webkit-linear-gradient(top,#fff,#adf);/* Safari, Chrome */

background:-o-linear-gradient(top,#fff,#adf);/* Opera */

background:-ms-linear-gradient(top,#fff,#adf);/* IE */

background:linear-gradient(top,#fff,#adf);/* W3C Standard */

Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben

background:-moz-radial-gradient(center,#fff,#adf);/* Firefox */

background:-webkit-radial-gradient(center,#fff,#adf);/* Safari, Chrome */

background:-o-radial-gradient(center,#fff,#adf);/* Opera */

background:-ms-radial-gradient(center,#fff,#adf);/* IE */

background:radial-gradient(center,#fff,#adf);/* W3C Standard */

linear-gradient, radial-gradient und conic-gradient sind Werte für background-image, border-image, list-style-image und generated content.

Es gibt drei Formen des CSS-Gradient:

  • Der lineare gerade Verlauf von oben nach unten oder von einer Seite zur anderen,
  • radialer Verlauf oder radial Gradient vom Rand zur Mitte des Elements (z.B. Zielscheibe),
  • konischer Verfauf

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund