Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

CSS3: gradienty

  • 18.04.2011 21:25:03
  • CSS
  • 11

Gradienty, kilka lat temu, to była prawdziwa zmora frontend developerów. A gdy grafik wpadł na genialny pomysł mieszania kilku gradientów, to szczęka opadała - nie wiadomo czy było do śmiechu czy płaczu. Najszybszym wyjściem byłoby pozbycie się grafika :). Na szczęscie w CSS3, można w łatwy sposób tworzyć gradienty.

Wstęp

Na nasze szczęście CSS3 pozwala na bardziej zaawansowane manipulacje obrazkami, a właściwie grafikami. W starych wersjach CSS (2 i 2.1) obrazki były wykorzystywane jako: tło (body, wylistowań, kontenerów, itp.), obrazek (na stronie). CSS 3 rozszerza ich wykorzystanie do bardziej "zaawansowanych" modyfikacji 2D.

Typy gradientów

W CSS3 będziemy mieli (bo na razie dokumentacja jest w trakcie tworzenia) dwa typy gradientów:

Dodatkowo każdy z nich występuje w dwóch wariacjach:

W CSS3 jest to zdefiniowane jako:

gradient = [ linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient ]

Gradienty liniowe (linear) - linear-gradient()

Funkcja linear-gradient przyjmuje dwa rodzaje parametrów:

linear-gradient(
  [[
    [ [top | bottom] || [left | right] ]
    |
    kąt
  ]
  ,]?
  kolor[, kolor]+
)

Pierwsza część odpoawiada za położenie lub kierunek gradientu (linia gradientu). Innymi słowy - w jakim kierunku będą "układać się" kolory.

Ta część parametru dla gradientu jest opcjonalna. To znaczy tyle, że jeżeli ją opuścimy, to zostanie przyjęta wartość domyślna jaką jest top. Czyli z góry na dół.

Linię gradientu możemy definiować na dwa sposoby:

  1. Za pomocą konkrętnej wartości kątu - angle np.: 10deg, 90deg. Dodatnia wartość oznacza, że gradient będzie obracał się w lewo.
  2. Podając konkretne "położenie" np.: top left, right, itd.

Jeżeli używasz stopni do określania kierunku gradientu, to pamiętaj, że:

  • 0deg oznacza gradient od lewej do prawej,
  • 90deg od dołu do góry, itd.

Druga definiuje listę kolorów, musi ich być minimum dwa aby gradient wyglądał jak gradient. Te dwa rodzaje parametrów możemy ze sobą dowolnie mieszać.

Dodatkowo, po kolorze gradientu możemy zdefiniować jego punkt startowy i końcowy (dystans, zasięg). Wartości jakie może on przyjmować to wartość podawana w procentach lub pikselach. Np.: jeżeli zdefiniujemy gradient składający się z dwóch kolorów, to pierwszy będzie posiadał wartość domyślną 0% (lub 0px) a drugi 100%. Więcej w przykładach.

Przykłady gradientów liniowych

Gradient z domyślnym kierunkiem (czarno-czerwony):

gradient liniowy 1

#linear1 {
   width: 400px;
   height: 100px;
   margin: auto;
   background: linear-gradient(black, red);
}

Gradient z domyślnym kierunkiem 3-kolorowy

gradient liniowy 1

#linear2 {
   width: 400px;
   height: 100px;
   margin: auto;
   background: linear-gradient(black, red, yellow);
}

Gradient 2-kolorowy pod kątem 45°

gradient liniowy 1

#linear3 {
   width: 400px;
   height: 100px;
   margin: auto;
   background: linear-gradient(45deg, black, red);
}

Gradient 3-kolorowy, którego kolory przechodzą między sobą w konkretnych punktach.

gradient liniowy 1

#linear4 {
   width: 400px;
   height: 300px;
   margin: auto;
   background: linear-gradient(black 50px, red 150px, yellow 200px);
}

Gradienty kołowe (radius) - radial-gradient()

Funkcja radial-gradient() nie różnie dużo od poprzedniej. Różnica jaka jest pomiędzy nimi, to dodatkowe parametry określnające owalność oraz jego wielkość.

radial-gradient(
	[bg-position,]? 
	[[
		[shape || size]
		|
		[length | percentage]{2}
	],]? 
	kolor[, kolor]+
)

Pierwszy parametr określa środek owalu. Działa to na podobnej zasadzie jak ustawianie tła dla background. Jeżeli go nie podamy, to domyślna wartość to center.

Drugi parametr jest już trochę bardziej skomplikowany, bo przyjmuje dwie wartości i dodatkowo można je mieszać na różne sposoby.

Zmienna shape przyjmuje dwie wartości circle lub ellipse.

Kolejny parametr to:

size = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ]

W wielkim skrócie, można powiedzieć, że ten parametr odpowiada za promień koła lub promienie elipsy. Wszystko jest uzależnione od rozmiarów obszaru z gradientem i pozycji startowej.

I tak:

Kilka przykładów

Gradient kołowy z domyślnym środkiem (czarno-czerwony):

gradient liniowy 1

#radial1 {
   width: 100px;
   height: 100px;
   margin: auto;
   background: radial-gradient(circle, #f00, #000);
}

Gradient kołowy ze środkiem w punkcie (20,50) pikseli z gradientem do najdalszego rogu:

gradient liniowy 1

#radial2 {
   width: 200px;
   height: 200px;
   margin: auto;
   background: radial-gradient(20px 50px, circle cover, #f00, #000);
}

Na koniec tęcza :)

gradient liniowy 1

#tecza {
   width: 400px;
   height: 200px;
   margin: auto;
   background: radial-gradient(200px 200px, ellipse, #00f 10px, #f00 30px, #f90 60px, #ff0 90px, #0f0 120px, #4B0082 150px, #b803ff 180px, #00f);
}

Kolory tęczy przechodzą między sobą co 30 pikseli. Pierwszy kolor to niebieski, aby imitował kolor "nieba" ;).

Mam nadzieję, że przybliżyłem Wam trochę gradinety. Jeżeli macie jakieś uwagi do moich tłumaczeń czy interpretacji niektórych zmiennych, to piszcie w komentarzach. Zdaję sobie sprawę, że coś może być nie tak.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Ender

19.04.2011 Ender

Całkiem niezły artykuł, interesujące przykłady - szczególnie ta schizowa tęcza ;P

Gavatar css3.pl

19.04.2011 css3.pl

Przykłady gradientów widać tylko pod Firefoksem.

Masz kilka literówek w tekście "mieszkania" "jest trakcie" "Linę gradientu".

Gavatar shpyo

19.04.2011 shpyo

@css3 - dzięŻi za literówki, poprawiłem. Gradienty zamienię na obrazki i będzie OK :)

Gavatar Mateusz Cieślak

24.05.2011 Mateusz Cieślak

Wyczerpująco przedstawiłeś dużo niuansów związanych z gradientami. Odnośnie widoczności gradientów tylko pod FireFox trzeba dodać prefiksy do atrybutów
-webkit-
-moz-

czyli np:
background: -webkit-radial-gradient(circle, #f00, #000);
background: -moz-radial-gradient(circle, #f00, #000);

Powinieneś wspomnieć o prefiksach w swoim tutku, aby uniknąć niejasności :) Poza tym świetna robota.


Mat

Gavatar shpyo

24.05.2011 shpyo

@Mateusz: gdybym pisał kod jeszcze z prefiksami... to dopiero by było :). Trzymałem się dokumentacji, bo prędzej czy później prefiksy nie będą potrzebne

Gavatar Miedziaq

06.06.2011 Miedziaq

widac wszystkie pod kazda przegladarką jesli ma sie nowe :)
mam tylko pytanie trzeba jakas w stylach deklaracje dodawać aby to działalo? bo wklejam ten kod do swoich styli i wyrzuca jako błędny kod i nie wyswietla w przegladarce

Gavatar shpyo

06.06.2011 shpyo

@Miedziaq: trzeba korzystać z tzw. prefixów do przeglądarek dla konkretnych stylów tak jak napisał Mateusz Cieślak.

Gavatar Kamil

07.05.2013 Kamil

Jak zrobiłeś te wycięcia kółek w kwadratowych awatarach w komentarzach? ;o)

Gavatar Kamil

07.05.2013 Kamil

Ok, już wiem:

.comments .comment img {
border-radius: 50%;
position: absolute;
top: 18px;
}

Gavatar M4ver

27.02.2014 M4ver

Witam. Fajny pomysł na przedstawienie gradientów w CSS, jest to pomocne dla pasjonatów tworzenia stron. Jednak mam pewną uwage, jest Pan twórcą kilku portali ale popełnia Pan błędy. Np. strona ta jest źle wyświetlana na monitorach z rozdzielczością 1024/768. Wiem, wiem, że już takie rozdzielczości są przestarzałe ale jednak jeszcze czynnie biorą udział w przeglądaniu stron. Akurat na takowym się poruszam i powiem, że jest to uciążliwe bo nie widzę tego menu po lewej stronie. Z poważaniem.

Gavatar shpyo

27.02.2014 shpyo

M4ver: zdaję sobie z tego sprawę. Brak czasu powoduje, że nie mam za bardzo czasu by zająć się blogiem. Na pewno będzie nowy wygląd i rozdzielczość nie będzie problemem.

Dodaj komentarz