Autor publikacji
Virtual Patriot - Administrator

linear-gradient()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji linear-gradient()

Za pomocą funkcji linear-gradient() możemy utworzyć obrazek w postaci gradientu liniowego.

Parametry funkcji linear-gradient()

Przykładowe zapisy

linear-gradient(red, gold)

linear-gradient(red -20%, gold 120%)

linear-gradient(red, orange, gold, yellow)

linear-gradient(to right top, red 20%, gold 80%)

linear-gradient(-60deg, red, yellow, green)

direction

Parametr direction nie jest wymaganym parametrem funkcji linear-gradient(). Parametr direction określa kierunek, w którym powinien tworzyć się nowo powstający gradient liniowy.

color

Parametr color jest wymaganym parametrem funkcji linear-gradient(). Parametr color określa jeden z kolorów, który powinien tworzyć nowo powstający gradient liniowy.

stop

Parametr stop nie jest wymaganym parametrem funkcji linear-gradient(). Parametr stop określa miejsce, od którego lub do którego powinien zmieniać swoją barwę kolor, który podaliśmy przed danym parametrem stop.

linear-gradient(45deg, red 0%, gold 100%)

schemat tworzenia gradientu liniowego w języku CSS

Występowanie funkcji linear-gradient()

  1. background-image
  2. box-reflect
  3. mask-image
  4. shape-outside

Przykład funkcji linear-gradient()

  background-image:linear-gradient(90deg, yellow 0%, orange 50%, red 100%);
do obszaru tła tego elementu "div" został dodany obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "90deg, yellow 0%, orange 50%, red 100%"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        background-image:linear-gradient(90deg, yellow 0%, orange 50%, red 100%);
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      do obszaru tła tego elementu "div" został dodany obrazek w postaci gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "linear-gradient()", w której to funkcji zostały użyte następujące wartości: "90deg, yellow 0%, orange 50%, red 100%"
    </div>

  </body>
</html>

Interpretacja funkcji linear-gradient()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .