Ostatnio edytowany:

radial-gradient()

Autor: Virtual Patriot

Przeznaczenie funkcji radial-gradient()

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

Parametry funkcji radial-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 promienisty 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

radial-gradient(red, gold)

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

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

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

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

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

shape

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

Wartość domyślna

circle (gdy dla parametru size zdecydowaliśmy się podać dokładnie jedną wartość) lub ellipse (gdy dla parametru size zdecydowaliśmy się podać dokładnie dwie wartości)

Dostępne wartości parametru shape

circle

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

ellipse

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

size

Parametr size nie jest wymaganym parametrem funkcji radial-gradient(). Parametr size określa rozmiar, jaki powinien posiadać nowo powstający gradient promienisty.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną. Procenty, lecz tylko wtedy, gdy dla parametru shape zdecydowaliśmy się podać wartość ellipse.

Sposób podawania

gdy dla parametru shape zdecydowaliśmy się podać wartość circle, wtedy należy podać dokładnie jedną wybraną wartość (wartość ta określi zarówno rozmiar szerokości, jak i rozmiar wysokości nowo powstającego gradientu promienistego). Gdy dla parametru shape zdecydowaliśmy się podać wartość ellipse, wtedy należy podać dokładnie dwie wybrane wartości (pierwsza wartość określi rozmiar szerokości nowo powstającego gradientu promienistego, a druga wartość określi rozmiar wysokości nowo powstającego gradientu promienistego).

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru obszaru, w którym tworzy się nowo powstający gradient promienisty (pierwsza wartość liczona jest względem aktualnego rozmiaru szerokości wspomnianego obszaru, a druga wartość liczona jest względem aktualnego rozmiaru wysokości wspomnianego obszaru)

Ważne

rozmiar nowo powstającego gradientu promienistego będzie zawsze dwukrotnie większy od rozmiaru, który chcemy określić. Innymi słowy wartość 50px 150px sprawi, że rozmiar szerokości nowo powstającego gradientu promienistego będzie równy 100px, a rozmiar wysokości nowo powstającego gradientu promienistego będzie równy 300px.

Wartość domyślna

farthest-corner

Dodatkowe dostępne wartości parametru size

Ważne

zawsze podajemy tylko jedną wartość (niezależnie od tego, jaką wartość wybraliśmy dla parametru shape)

closest-side

Wartość closest-side parametru size sprawia, że po określeniu wartości parametru position rozmiar nowo powstającego gradientu promienistego zarówno w poziomie, jak i w pionie uzależniony będzie od najbliżej położonych krawędzi obszaru, w którym tworzy się nowo powstający gradient promienisty.

farthest-side

Wartość farthest-side parametru size sprawia, że po określeniu wartości parametru position rozmiar nowo powstającego gradientu promienistego zarówno w poziomie, jak i w pionie uzależniony będzie od najdalej położonych krawędzi obszaru, w którym tworzy się nowo powstający gradient promienisty.

closest-corner

Wartość closest-corner parametru size sprawia, że po określeniu wartości parametru position rozmiar nowo powstającego gradientu promienistego zarówno w poziomie, jak i w pionie uzależniony będzie wyłącznie od jednego najbliżej położonego rogu obszaru, w którym tworzy się nowo powstający gradient promienisty.

farthest-corner

Wartość farthest-corner parametru size sprawia, że po określeniu wartości parametru position rozmiar nowo powstającego gradientu promienistego zarówno w poziomie, jak i w pionie uzależniony będzie wyłącznie od jednego najdalej położonego rogu obszaru, w którym tworzy się nowo powstający gradient promienisty.

position

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

Dostępne wartości

wartości pozycjonujące lub dowolna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub procenty

Sposób podawania

po słowie kluczowym at należy podać dokładnie jedną wybraną lub dokładnie dwie wybrane wartości. Gdy podamy tylko jedną wartość, wartością domyślną drugiej wartości będzie wartość center. Pierwsza wartość odpowiada za przesunięcie środka nowo powstającego gradientu promienistego w poziomie względem lewej krawędzi obszaru, w którym tworzy się nowo powstający gradient promienisty (wartości dodatnie przesuwają w prawo, wartości ujemne przesuwają w lewo). Druga wartość odpowiada za przesunięcie środka nowo powstającego gradientu promienistego w pionie względem górnej krawędzi obszaru, w którym tworzy się nowo powstający gradient promienisty (wartości dodatnie przesuwają w dół, wartości ujemne przesuwają w górę).

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru obszaru, w którym tworzy się nowo powstający gradient promienisty (pierwsza wartość liczona jest względem aktualnego rozmiaru szerokości wspomnianego obszaru, a druga wartość liczona jest względem aktualnego rozmiaru wysokości wspomnianego obszaru)

Wartość domyślna

center

color

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

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

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 promienisty 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 promienistego od nieco innego koloru (bardziej jaśniejszego lub bardziej ciemniejszego)

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru nowo powstającego gradientu promienistego

Wartość domyślna

wartość określona przez przeglądarkę internetową w celu równomiernego rozmieszczenia kolorów względem siebie w rozmiarze nowo powstającego gradientu promienistego

radial-gradient(circle 100px at center, red 0%, gold 100%)

schemat tworzenia gradientu promienistego w języku CSS

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

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

Przykład funkcji radial-gradient()

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

  </body>
</html>

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