Ostatnio edytowany:

repeating-linear-gradient()

Autor: Virtual Patriot

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()

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 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))

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 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 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.

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 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

Właściwości CSS dla funkcji repeating-linear-gradient()

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

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:#CBFFFF;
      }
    </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>

Interpretacja funkcji repeating-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 .