Gradient CSS funkcije

Pogledajmo najpre nekoliko primera pomoću kojih će nam biti jasnija ova zbrka oko kolor-stopova. Napravili smo 5 klasa koje zadajemo u 5 DIV blokova. Svuda smo koristili atribut background-image kome smo zadali linearni gradient pod uglom od 90^o (s leva na desno). Ovde nas zanima ono što dolazi posle zadatog ugla, a to su kolor-stopovi.

<style>
  .dve-boje {
    background-image: linear-gradient(90deg,   yellow, red);
  }
  .vise-boja {
    background-image: linear-gradient(90deg,   yellow, #67d, red, #600);
  }
  .pozicije {
    background-image: linear-gradient(90deg,   yellow, #67d 20%, red 30%, #600);
  }
  .bez-krajnjih {
    background-image: linear-gradient(90deg,   #aeb 40%, #96c 60%);
  }
  .trenutno {
    background-image: linear-gradient(90deg,   #ffc 50px, #96c 50px, #96c 60px, #fdc 60px);
  }
</style>

<div class="dve-boje">1</div>
<div class="vise-boja">2</div>
<div class="pozicije">3</div>
<div class="bez-krajnjih">4</div>
<div class="trenutno">5</div>

Evo kako sve to izgleda:

1 Ovo je najprostiji primer - zadali smo samo dve boje, bez pozicija. CSS ih je smestio na početku i na kraju, pa smo tako dobili prelaz od žute do crvene, od početka do kraja.

2 U drugom primeru smo zadali četiri boje i vidimo da su u gradientu pravilno raspoređene (na svakoj trećini).

3 Ovde smo zadali te iste četiri boje, ali sada druga i treća imaju zadate pozicije, dok se za prvu i četvrtu podrazumeva da su na početku i kraju.

4 Evo šta se dešava kada zadamo sve boje sa pozicijama, ali nema ni početnog (0%) ni završnog (100%) kolor-stopa. Prelaz je definisan kolor-stopovima samo na površini od 40% do 60%. Od "nule" pa do 40% imamo samo "ravno" popunjenu površinu i to bojom koja je zadata u prvom kolor-stopu (zelena). Slično je i sa delom površine od 60% do kraja - popunjava ga boja poslednjeg kolor-stopa (ljubičasta).

5 Najzad imamo primer trenutnog prelaska na drugu boju, zadavanjem istih pozicija za različite boje.

Ovde smo napravili nekoliko primera koji demonstriraju različite načine zadavanja uglova, kao i eksperimente sa kombinacijama više gradienta ili slika u pozadini.

<style>
  .primer-1 {
    background-image: linear-gradient(#003, #77e);
  }
  .primer-2 {
    background-image: linear-gradient(to top right,   yellow, #617 30%, red);
  }
  .primer-3 {
    background-image: linear-gradient(110deg,   #000 50%, red 50%, red 60%, yellow 60%, yellow 70%, 
      green 70%, green 80%, cyan 80%, cyan 90%, #000 90%);
  }
  .primer-4 {
    background-color: #76c;
    background-image: linear-gradient(90deg,  transparent 20%, #ffc 40%, transparent 60%);
  }
  .primer-5 {
    background-color: red;
    background-image: 
      linear-gradient(90deg,  transparent 20%, #0008 30%, transparent 40%),
      linear-gradient(to top,  transparent 20%, #0003 30%, transparent 40%);
  }
  .primer-6 {
    background-image: 
      linear-gradient(to bottom,  #204, transparent 60%),
    linear-gradient(90deg,  #83a 20%, #94b 20%, #94b 40%, #a5c 40%, #a5c 60%, #94b 60%, #94b 80%, #83a 80%);
  }
  .primer-7 {
    background-color: #486;
    background-image: linear-gradient(to bottom right,   #fea, #5b7);
    background-position: 20px 40px;
    background-repeat: no-repeat;
  }
  .primer-8 {
    background-color: #943;
    background-image: linear-gradient(to bottom right,   #eaf, #b75);
    background-size: 40% 15px;
    background-repeat: repeat-y;
  }
  .primer-9 {
    background-image: linear-gradient(to top left,   #eaf, transparent),
    url("img/pic-carrot.jpg");
    background-size: 100%;
  }
</style>

<section>
  <div class="primer-1"> 1 </div>
  <div class="primer-2"> 2 </div>
  <div class="primer-3"> 3 </div>
  <div class="primer-4"> 4 </div>
  <div class="primer-5"> 5 </div>
  <div class="primer-6"> 6 </div>
  <div class="primer-7"> 7 </div>
  <div class="primer-8"> 8 </div>
  <div class="primer-9"> 9 </div>
</section>

Evo kako sve to izgleda:

1 Ovo je osnovni primer. Nismo čak ni zadali pravac (podrazumeva se to bottom (odozgo naniže)) već samo dve boje, bez pozicija. Kao što već znamo, u tom slučaju će boje biti pozicionirane automatski na početku i na kraju gradienta.

2 Ovo je takođe sasvim jednostavan linearni gradient, koji je usmeren prema gornjem-desnom "ćošku".

3 Ovde smo na specifičan način zadali boje da bismo dobili "trenutne" ili bolje reći "diskretne" prelaze. Ono što nas još više zanima je što smo ovaj put zadali ugao usmerenja senčenja od 110^o.

4 Ovde smo iskombinovali boju pozadine zadatu preko background-color i pozadinsku sliku generisanu kao linearni gradient. Gradient bi naravno pokrio boju pozadine, ali u njemu koristimo prelaz od providne (transparent) boje do svetlo-žute i nazad opet do potpuno providne, pa se tako vidi i ljubičasta boja pozadine.

5 Ovo je sličan primer kao malopre - koristimo providnost kako bismo iskombinovali crvenu boju pozadine sa gradientima. U gradientima je sve providno ili poluprovidno, a glavna stvar je što smo iskombinovali dva gradienta, jedan iznad drugog. Već znamo da kada kombinujemo više slika u pozadini, redosled navedenih slika je od "iznad" prema "pozadi".

6 Ovde opet kombinujemo dva gradienta kako bismo dobili lep efekat zatamnjivanja "linija" u pozadini.

7 U ovom primeru smo napravili jedan običan dijagonalni gradient, ali smo iskoristili to što je u pitanju generisana slika. Tako smo joj izmestili poziciju i isključili ponavljanje.

8 Slično smo uradili i ovde, s tim što smo demonstritrali kako izgleda kada vršimo smanjenje veličine slike u pozadini i pustimo da se ponavlja po vertikali.

9 Najzad, pokazali smo i kako se senčenje kombinuje sa običnom slikom u pozadini. Gradient je naravno postavljen iznad slike i veliki deo mu je providan kako bi se i slika videla.
Autor sličice je David Revoy, a preuzeta je sa njegovog open-source strip projekta Pepper and Carrot.

Evo sada nekoliko primera za korišćenje CSS funkcije repeating-linear-gradient().

<style>
  .primer-1 {
    background-image: repeating-linear-gradient(to bottom,   #003, #99f);
  }
  .primer-2 {
    background-image: repeating-linear-gradient(to bottom,   #003, #99f 30%);
  }
  .primer-3 {
    background-image: repeating-linear-gradient(120deg,   red, red 5%, #822 5%, #822 15%);
  }
  .primer-4 {
    background-color: #6f6;
    background-image: 
      repeating-linear-gradient(45deg,  transparent 20%, #242 35%, transparent 50%),
      repeating-linear-gradient(to top,  transparent 20%, #242 35%, transparent 50%);
  }
  .primer-5 {
    color: black;
    background-image: repeating-linear-gradient(180deg, #ffc, #ffc 1em, #bbe 1em, #bbe calc(1em + 2px));
  }
  .primer-6 {
    color: black;
    background-color: #eee;
    background-image: 
      linear-gradient(to right, #556a, transparent 40%),
      repeating-linear-gradient(180deg, transparent, transparent 10px, #ccf 10px, #ccf 11px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, #ccf 10px, #ccf 11px);
  }
</style>

<section>
  <div class="primer-1"> 1 </div>
  <div class="primer-2"> 2 </div>
  <div class="primer-3"> 3 </div>
  <div class="primer-4"> 4 </div>
  <div class="primer-5"> 5 </div>
  <div class="primer-6"> 6 </div>
</section>

Rezultat je sledeći:

1 Prvi primer pokazuje situaciju kada nema ponavljanja uzorka. Zašto? Pa zadali smo samo dva kolor-stopa i to bez pozicija. Znamo da u tom slučaju CSS prvi rasporedi na 0%, a drugi na 100%. Nema "prostora" za ponavljanje.

2 Isto kao prvi primer, ali ovde smo postavili drugi kolor-stop na poziciju 30%. Znači od 30%-100% ima prostora za ponavljanje i tako dobijamo šaru sa slike.

3 Ovde smo napravili "diskretne" prelaze boja, pod uglom. Vidite da smo definisali samo dve boje, crvenu od 0%-5% i tamno-crvenu od 5% do 15%. Linije smo mogli da definišemo praktično na bilo kojim pozicijama, s tim što bi CSS uzorak ponavljao u "oba pravca" - i ka početku i ka kraju.

4 U ovom primeru smo iskombinovali jedan horizontalni gradient i drugi pod uglom. Oba su napravljeni na istovetan način kao providno-tamno-providno. Ono što bi inače bili "jednostruki" prelazi, uz ponavljanje uzorka predstavljaju zanimljiv polu-providni šablon.

5 Ovde smo demonstrirali efekat "sveske na linije". Sam gradient nije ništa specijalno, ali smo želeli da širina svetlog dela bude 1em, a linije 2px. Da bismo podesili tačnu poziciju za kolor-stop koji definiše širinu linije, koristili smo CSS funkciju calc() kojom smo sabrali 1em + 2px i tako dobili željenu poziciju.

6 "Sveska na kvadratiće" demonstrira kombinovanje ne samo ponavljajućih uzoraka kako bismo dobili kvadratiće, već i korišćenje običnog linear-gradienta preko svega toga da bismo dobili zatamnjenje na levoj strani.

Najpre ćemo pokušati da razumemo veličine i pozicije.

<style>
  .primer-1 {
    background-image: 
    radial-gradient(transparent 50%, #000 50%, #000 calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(orange, red);
  }
  .primer-2 {
    background-image: radial-gradient(75% 30%, #fff 50%, #ccc 50%, #ccc 100%, #888 100%);
  }
  .primer-3 {
    color: black;
    background-image: radial-gradient(circle 44px, lime, green 100%, #efc 100%);
  }
  .primer-4 {
    color: black;
    background-image: radial-gradient(ellipse 50% 30px, aqua, navy 100%, #cdf 100%);
  }
  .primer-5 {
    background-image: radial-gradient(at 25% 75%, yellow, purple);
  }
  .primer-6 {
    background-image: radial-gradient(at 100px 50%, white, #c07);
  }
  .primer-7 {
    background-image: radial-gradient(circle at center bottom, yellow 30px, orange 30px, #911 40px, #400);
  }
  .primer-8 {
    color: black;
    background-image: radial-gradient(140% 220% at right 10%, transparent 40%, #444 55%, transparent 63%);
  }
</style>

<section>
  <div class="primer-1"> 1 </div>
  <div class="primer-2"> 2 </div>
  <div class="primer-3"> 3 </div>
  <div class="primer-4"> 4 </div>
  <br /v>
  <div class="primer-5"> 5 </div>
  <div class="primer-6"> 6 </div>
  <div class="primer-7"> 7 </div>
  <div class="primer-8"> 8 </div>
</section>

Pogledajmo rezultat i objašnjenja.

1 Ovo je najprostiji primer - zadali smo samo dve boje, a sve ostalo se podrazumeva - centrirana elipsa poluprečnika koji dosežu do najdaljeg ugla. Kao "gratis" smo dodali i crni krug iznad, kako bismo videli gde se nalazi 50% veličine oblika.

2 Ovde opet nismo zadavali oblik ili poziciju, tako da radimo sa centriranom elipsom. Samo smo zadali horizontalni poluprečnik od 75% (tako da izlazi van okvira elementa) i vertikalni od 25% (tako gradient oblik zauzima polovinu visine elementa). Napravili smo diskretne prelaze među nijansama tako da je jasno obeleženo gde je 50% a gde 100%, što se tiče kolor-stopova.

3 U trećem primeru smo zadali kružno senčenje, a pošto krug ne može imati procentualno zadatu veličinu, morali smo da je zadamo kao metriku, odnosno 44px (računali smo šta bi bila polovina širine ovde prikazanog elementa). Tako smo postigli da kružnica ide od ivice do ivice.

4 Ovde smo uradili sličnu stvar sa elipsom, s tim što smo zadali horizontalni poluprečnik od 50% (koji ide od ivice do ivice), a vertiklani kao metričku vrednost od 30px.

5 U petom primeru smo izmestili centar na poziciju od 25% po horizontali i 75% po vertikali. Nismo zadavali ni oblik ni veličinu, što znači da je u pitanju elipsa koja doseže do najdaljeg ugla.

6 Ovde smo zadali poziciju po horizontali od 100px koja izlazi van okvira širine trenutnog elementa, dok smo po vertikali centrirali senčenje (zadatom vrednošću od 50%).

7 Pozicija je ovde zadata ključnim rečima center i bottom (mada je samo bottom bio dovoljan - center bi se podrazumevao). Traženi oblik je circle. Uz malo vešto postavljenih kolor-stopova možemo dobiti jednostavan efekat "zalaska".

8 U poslednjem primeru smo zadali elipsu prilično velikih dimenzija i poziciju kao kombinaciju ključne reči i procenta (i to je moguće). Kolor-stopovima smo postigli jednu tamnu "traku" koja zbog velikih dimenzija, na prvi pogled i ne izgleda kao deo elipse.

Doseg za krug i elipsu

U tekstu smo dali objašnjenja za četiri moguće vrednosti dosega. Međutim, ipak je bolje da pogledate kako to izgleda "uživo" i kako se rezultat razlikuje kada je kao oblik zadat circle od slučaja kada je zadat oblik ellipse.

<style>
  .cir-cs {
    background-image: radial-gradient(circle closest-side at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .cir-cc {
    background-image: radial-gradient(circle closest-corner at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .cir-fs {
    background-image: radial-gradient(circle farthest-side at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .cir-fc {
    background-image: radial-gradient(circle farthest-corner at 25% 25%, orange, red 100%, #ffc 100%);
  }
  
  .ell-cs {
    background-image: radial-gradient(ellipse closest-side at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .ell-cc {
    background-image: radial-gradient(ellipse closest-corner at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .ell-fs {
    background-image: radial-gradient(ellipse farthest-side at 25% 25%, orange, red 100%, #ffc 100%);
  }
  .ell-fc {
    background-image: radial-gradient(ellipse farthest-corner at 25% 25%, orange, red 100%, #ffc 100%);
  }
</style>

<section>
  <h2>Doseg za kružnicu</h2>
  <div class="cir-cs"> closest side </div>
  <div class="cir-cc"> closest corner </div>
  <div class="cir-fs"> farthest side </div>
  <div class="cir-fc"> farthest corner </div>
  <h2>Doseg za elipsu</h2>
  <div class="ell-cs"> closest side </div>
  <div class="ell-cc"> closest corner </div>
  <div class="ell-fs"> farthest side </div>
  <div class="ell-fc"> farthest corner </div>
</section>

Inače, kolor-stopove smo tako podesili da je oblik jasno ograničen na poziciji 100%, kako bismo lakše uvideli kakva mu je veličina.

Ovde smo predstavili nekoliko primera koji se dobijaju raznim kombinacijama linearnih i kružnih senčenja, jednostrukih i senčenja sa ponavljanjem uzorka, kolornog miksovanja, ponavljanja pozadine i sl. Kao što vidite moguće je praviti sasvim apstraktne pozadine, šablone, pa čak i jednostavne slike.

<style>
  .primer-1 {
    background-image: 
      radial-gradient(at bottom, orange, transparent),
      radial-gradient(150% 80% at left 90%, #f00f, #50f9, #ff5c, #52ca, #ffcf, #b0aa),
      linear-gradient(120deg, #d55, yellow, #72d, orange);
    background-blend-mode: screen, screen, normal;
  }
  .primer-2 {
    color: #fff;
    background-color: #464;
    background-image: 
      repeating-radial-gradient(circle at 0% 0%, #0000, #0000 20px, #cf9 20px, #8c6 25px),
      repeating-radial-gradient(circle at 100% 0%, #0000, #0000 20px, #cf9 20px, #8c6 25px),
      repeating-radial-gradient(circle at 0% 100%, #0000, #0000 20px, #cf9 20px, #8c6 25px),
      repeating-radial-gradient(circle at 100% 100%, #0000, #0000 20px, #cf9 20px, #8c6 25px),
      linear-gradient(#696, #353);
  }
  .primer-3 {
    background-image: 
      repeating-radial-gradient(120% 50% at 25% 25%, #6284, #6284 5px, transparent 5px, transparent 20px),
      repeating-radial-gradient(circle at bottom, #0000, #0000 20px, #ca9 20px, #ecb 40px),
      linear-gradient(30deg, #ffc, #fb8);
  }
  .primer-4 {
    color: #fff;
    background-image: 
      radial-gradient(circle at 80% 80%, #ffc4, #ffc3 10%, #0000 10%),
      radial-gradient(circle at 70% 70%, #ffc4, #ffc3 7%, #0000 7%),
      radial-gradient(circle at 25% 25%, #ffc4, #ffc3 5%, #0000 5%),
      radial-gradient(circle, yellow 0%, #55f3 50%),
      radial-gradient(circle, #ffc 0%, #ffc0 20%),
      linear-gradient(90deg, transparent 48%, #ffd4 50%, transparent 52%),
      linear-gradient(transparent 48%, #ffd4 50%, transparent 52%),
      linear-gradient(#113, #3bd);
    background-blend-mode: screen;
  }
  .primer-5 {
    background-image:
      linear-gradient(#4005, transparent 20%, transparent 90%, #0005),
      radial-gradient(360% 280% at top, #ecb, #ecb 20%, #0008 20%, #0000 22%, transparent),
      repeating-linear-gradient(to right, #758, #758 10%, #869 10%, #869 20%);
  }
  .primer-6 {
    background-image: 
      radial-gradient(400% 280% at 50% 140%, #5c5, #5c5 20%, transparent 21%, transparent),
      radial-gradient(200% 360% at right 90%, #0000, #0000 29%, #f5fc 30%, #55fc 32%, #5f5c 34%, #ff5c 36%, #f55c 38%, transparent 39%),
      radial-gradient(500% 280% at 70% 120%, #5c5, #5c5 20%, #aff 20%, #5df 40%);
  }
  .primer-7 {                 /* by Lea Verou */
    background-color: #ffb;
    background-image:
      linear-gradient(45deg, navy 25%, transparent 25%, transparent 75%, navy 75%, navy), 
      linear-gradient(-45deg, navy 25%, transparent 25%, transparent 75%, navy 75%, navy);
    background-size: 40px 40px;
  }
  .primer-8 {                 /* by Lea Verou */
    color: #fff;
    background-color:#556;
    background-image: 
      linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
      linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
      linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
      linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
      linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
      linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  }
  .primer-9 {    /* by Paul Salentiny */
    background:
      radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
      radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
      linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
      linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
      linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
      linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
    background-size:40px 60px;
  }
</style>

<div class="primer-1"> 1 </div>
<div class="primer-2"> 2 </div>
<div class="primer-3"> 3 </div>
<div class="primer-4"> 4 </div>
<div class="primer-5"> 5 </div>
<div class="primer-6"> 6 </div>
<div class="primer-7"> 7 </div>
<div class="primer-8"> 8 </div>
<div class="primer-9"> 9 </div>

Nećemo objašnjavati kako smo postigli koji efekat, ostavljamo vama da malo eksperimentišete - na kraju krajeva, većina toga i jeste nastala isprobavanjem.

Nadamo se da se osećate inspirisano.