Ostatnio edytowany:

linear-gradient()

Autor: Virtual Patriot

Przeznaczenie funkcji linear-gradient()

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

Parametry funkcji linear-gradient()

Ważne

należy podać przynajmniej dwie pary parametrów color stop (możemy podać więcej par, dzięki czemu nowo powstający gradient liniowy będzie tworzony przez większą liczbę kolorów (parametr stop nie jest parametrem wymaganym), przed każdą wartością parametru color należy postawić dokładnie jeden znak przecinka, wszystkie pozostałe wartości parametrów należy oddzielić od siebie przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji))

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.

Dostępne wartości

wartości pozycjonujące (bez wartości center) lub dowolna liczba wraz z wybraną jednostką miary kąta

Sposób podawania

należy podać dokładnie jedną wybraną lub dokładnie dwie wybrane wartości pozycjonujące (w obu wypadkach po słowie kluczowym to) lub dokładnie jedną dowolną liczbę wraz z wybraną jednostką miary kąta

Wartości dodatnie

wartości dodatnie obracają w prawo linię, względem której tworzy się nowo powstający gradient liniowy (obrót dokonywany jest względem punktu środkowego występującego na wspomnianej linii)

Wartości ujemne

wartości ujemne obracają w lewo linię, względem której tworzy się nowo powstający gradient liniowy (obrót dokonywany jest względem punktu środkowego występującego na wspomnianej linii)

Wartość domyślna

to bottom (między innymi równoznaczna z wartością 180deg lub wartością -180deg)

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.

Dostępne wartości

wybrany sposób definiowania wartości koloru w języku CSS

Wartość domyślna

brak

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.

Dostępne wartości

dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

wartości kolejnych ewentualnych parametrów stop należy podawać w kolejności rosnącej (jeżeli złamiemy tę zasadę przeglądarka internetowa wybierze wartość dla danego parametru stop na podstawie największej wartości któregoś z parametrów stop występującego przed danym parametrem stop). Gdy któryś z kolejnych parametrów stop będzie posiadał tą samą wartość, wtedy kolejnym kolorem tworzącym nowo powstający gradient liniowy będzie ten kolor, który występuje wraz z parametrem stop podanym przez nas najpóźniej.

Wartości ujemne

wartości ujemne umożliwiają rozpoczęcie tworzenia nowo powstającego gradientu liniowego bardziej na zewnątrz obszaru, w którym tworzy się nowo powstający gradient liniowy

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru długości linii, względem której tworzy się nowo powstający gradient liniowy. Linia, względem której tworzy się nowo powstający gradient liniowy zawsze zajmuje cały rozmiar obszaru, w którym tworzy się nowo powstający gradient liniowy.

Wartość domyślna

wartość określona przez przeglądarkę internetową w celu równomiernego rozmieszczenia kolorów względem siebie nawzajem na linii, względem której tworzy się nowo powstający gradient liniowy

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

schemat tworzenia gradientu liniowego w języku CSS

Właściwości CSS dla 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:#CBFFFF;
      }
    </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 .