Autor publikacji
Virtual Patriot - Administrator

repeating-radial-gradient()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji repeating-radial-gradient()

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

Parametry funkcji repeating-radial-gradient()

Przykładowe zapisy

repeating-radial-gradient(red, gold)

repeating-radial-gradient(ellipse, red 0%, gold 50%)

repeating-radial-gradient(ellipse 100px 50px, red 0%, gold 50%)

repeating-radial-gradient(circle closest-corner, red 0%, gold 50%)

repeating-radial-gradient(circle 50px at left bottom, red 0%, gold 100%)

repeating-radial-gradient(ellipse 25% 10% at -25px 60px, red 0%, gold 100%)

shape

Parametr shape nie jest wymaganym parametrem funkcji repeating-radial-gradient(). Parametr shape określa kształt, jaki powinien posiadać nowo powstający powtarzający się gradient promienisty.

Dostępne wartości parametru shape

circle

Wartość circle parametru shape określa okrągły kształt dla nowo powstającego powtarzającego się gradientu promienistego.

ellipse

Wartość ellipse parametru shape określa eliptyczny kształt dla nowo powstającego powtarzającego się gradientu promienistego.

size

Parametr size nie jest wymaganym parametrem funkcji radial-gradient(). Parametr size określa rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego.

Dodatkowe dostępne wartości parametru size

closest-side

Wartość closest-side parametru size sprawia, że rozmiarem promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie długość od środka nowo powstającego powtarzającego się gradientu promienistego do najbliżej położonej krawędzi obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty.

farthest-side

Wartość farthest-side parametru size sprawia, że rozmiarem promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie długość od środka nowo powstającego powtarzającego się gradientu promienistego do najdalej położonej krawędzi obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty.

closest-corner

Wartość closest-corner parametru size sprawia, że rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie uzależniony od środka nowo powstającego powtarzającego się gradientu promienistego oraz od najbliżej położonego rogu obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty.

farthest-corner

Wartość farthest-corner parametru size sprawia, że rozmiar promienia lub promieni nowo powstającego powtarzającego się gradientu promienistego będzie uzależniony od środka nowo powstającego powtarzającego się gradientu promienistego oraz od najdalej położonego rogu obszaru, w którym tworzy się nowo powstający powtarzający się gradient promienisty.

position

Parametr position nie jest wymaganym parametrem funkcji repeating-radial-gradient(). Parametr position określa miejsce, gdzie powinien znaleźć się środek nowo powstającego powtarzającego się gradientu promienistego.

color

Parametr color jest wymaganym parametrem funkcji repeating-radial-gradient(). Parametr color określa jeden z kolorów, który powinien tworzyć nowo powstający powtarzający się gradient promienisty.

stop

Parametr stop nie jest wymaganym parametrem funkcji repeating-radial-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.

Występowanie funkcji repeating-radial-gradient()

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

Przykład funkcji repeating-radial-gradient()

  background-image:repeating-radial-gradient(circle 75px at bottom, red 0%, orange 50%, yellow 100%);
do obszaru tła tego elementu "div" został dodany obrazek w postaci powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "circle 75px at bottom, red 0%, orange 50%, yellow 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:repeating-radial-gradient(circle 75px at bottom, red 0%, orange 50%, yellow 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 powtarzającego się gradientu promienistego, ponieważ do tego elementu "div" została dodana właściwość "background-image" wraz z wartością w postaci funkcji "repeating-radial-gradient()", w której to funkcji zostały użyte następujące wartości: "circle 75px at bottom, red 0%, orange 50%, yellow 100%"
    </div>

  </body>
</html>

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