Autor publikacji: Virtual Patriot - Administrator

repeating-linear-gradient()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the repeating-linear-gradient notation (LV3)

Przeznaczenie funkcji `repeating-linear-gradient()`

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

Parametry funkcji `repeating-linear-gradient()`

            direction, color stop

Ważne

należy podać przynajmniej dwie pary parametrów color stop (możemy podać więcej par, dzięki czemu nowo powstający powtarzający się gradient liniowy będzie mógł składać się z większej liczby kolorów (parametr stop nie jest parametrem wymaganym, ponadto każdą kolejną parę wspomnianych parametrów należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka))

aby móc ujrzeć powtarzający się gradient liniowy wartością ostatniego parametru stop powinna być wartość znacząco mniejsza od rozmiaru długości linii, względem której tworzy się nowo powstający powtarzający się gradient liniowy

Przykładowe zapisy

repeating-linear-gradient(red 0%, gold 50%)

repeating-linear-gradient(red -25%, gold 25%)

repeating-linear-gradient(red 0%, orange 20%, yellow 50%)

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

repeating-linear-gradient(-60deg, red 0%, yellow 12.5%, green 25%)

direction

Parametr direction nie jest wymaganym parametrem funkcji repeating-linear-gradient(). Parametr direction określa kierunek, w którym powinien tworzyć się nowo powstający powtarzający się 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 przypadkach 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 powtarzający się 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 powtarzający się 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 repeating-linear-gradient(). Parametr color określa jeden z kolorów, który powinien tworzyć nowo powstający powtarzający się gradient liniowy.

stop

Parametr stop nie jest wymaganym parametrem funkcji repeating-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 powtarzający się 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 powtarzającego się gradientu liniowego bardziej na zewnątrz obszaru, w którym tworzy się nowo powstający powtarzający się 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 powtarzający się gradient liniowy. Linia, względem której tworzy się nowo powstający powtarzający się gradient liniowy zawsze zajmuje cały rozmiar obszaru, w którym tworzy się nowo powstający powtarzający się 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 powtarzający się gradient liniowy

Występowanie funkcji `repeating-linear-gradient()`

Przykład funkcji `repeating-linear-gradient()`

  background-image:repeating-linear-gradient(180deg, yellow 0%, orange 12.5%, red 25%);

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

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:repeating-linear-gradient(180deg, yellow 0%, orange 12.5%, red 25%);
        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 powtarzającego się gradientu liniowego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-linear-gradient()", w której to funkcji zostały użyte następujące wartości: "180deg, yellow 0%, orange 12.5%, red 25%"
    </div>

  </body>
</html>