CSS3 - Gradients


Korištenje CSS3 gradijenata

Svojstvo gradijenta CSS3 pruža fleksibilno rješenje za generisanje glatkih prelaza između dvije ili više boja. Ranije, da bismo postigli takav efekat, morali smo koristiti slike. Korištenjem CSS3 gradijenata možete smanjiti vrijeme preuzimanja i uštedjeti upotrebu propusnosti. Elementi s gradijentima mogu se povećati ili smanjiti u bilo kojoj mjeri bez gubitka kvaliteta, a izlaz će se prikazati mnogo brže, jer ga generiše pretraživač. Gradijenti su dostupni u dva stila: linearnom i radijalnom.



Kreiranje CSS3 linearnih gradijenata

Da biste kreirali linearni gradijent, morate definisati najmanje dva zaustavljanja u boji. Međutim, za stvaranje složenijih efekata gradijenta možete definisati više zaustavljanja u boji. Graničnici u boji su boje među kojima želite učiniti glatke prelaze. Takođe možete postaviti početnu točku i pravac (ili ugao) duž kojih se primjenjuje gradijentni efekt. Osnovna sintaksa stvaranja linearnih gradijenata pomoću ključnih riječi može se dati sa:

linear-gradient(direction, color-stop1, color-stop2, ...)


Linearni gradijent - od vrha do dna

Sljedeći primjer će stvoriti linearni gradijent od vrha do dna. Ovo je difoltna sintaksa.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow);
    /* Standardna sintaksa */
    background: linear-gradient(red, yellow);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer linearnih gradijenata od vrha do dna</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(red, yellow);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(red, yellow);
      /* Standradna sintaksa */
      background: linear-gradient(red, yellow);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Linearni gradijent - s lijeva na desno

Sljedeći primjer će stvoriti linearni gradijent s lijeva na desno.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red, yellow);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(left, red, yellow);
    /* Standardna sintaksa */
    background: linear-gradient(to right, red, yellow);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer linearnih gradijenata s lijeva na desno</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(left, red, yellow);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(left, red, yellow);
      /* Standradna sintaksa */
      background: linear-gradient(to right, red, yellow);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Linearni gradijent - dijagonala

Takođe možete stvoriti gradijent duž dijagonalnog smjera. Sljedeći primjer će stvoriti linearni gradijent od donjeg lijevog ugla do gornjeg desnog ugla okvira elementa.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(bottom left, red, yellow);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(bottom left, red, yellow);
    /* Standardna sintaksa */
    background: linear-gradient(to top right, red, yellow);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer linearnih gradijenata duž dijagonale</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(bottom left, red, yellow);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(bottom left, red, yellow);
      /* Standardna sintaksa */
      background: linear-gradient(to top right, red, yellow);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Postavljanje smjera linearnih gradijenata pomoću uglova

Ako želite veću kontrolu nad smjerom gradijenta, možete postaviti ugao, umjesto unaprijed definisanih ključnih riječi. Ugao 0 stepena stvara gradijent od dna prema vrhu, a pozitivni uglovi predstavljaju rotaciju u smjeru kazaljke na satu, što znači da ugao od 90 stepeni stvara gradijent s lijeva u desno. Osnovna sintaksa stvaranja linearnih gradijenata pomoću ugla može se napisati kao:

linear-gradient(angle, color-stop1, color-stop2, ...)

Sljedeći primjer će stvoriti linearni gradijent s lijeva na desno koristeći ugao.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(0deg, red, yellow);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(0deg, red, yellow);
    /* Standardna sintaksa */
    background: linear-gradient(90deg, red, yellow);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja pravca linearnih gradijenata pomoću uglova</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(0deg, red, yellow);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(0deg, red, yellow);
      /* Standardna sintaksa */
      background: linear-gradient(90deg, red, yellow);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Stvaranje linearnih gradijenata pomoću višestrukih zaustavljanja u boji

Takođe možete stvoriti gradijente za više od dvije boje. Sljedeći primjer će vam pokazati kako stvoriti linearni gradijent koristeći više zaustavljanja u boji. Sve boje su ravnomjerno raspoređuju.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow, lime);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow, lime);
    /* Standardna sintaksa */
    background: linear-gradient(red, yellow, lime);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer linearnih gradijenata s višestrukim zaustavljanjem boja</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(red, yellow, lime);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(red, yellow, lime);
      /* Standardna sintaksa */
      background: linear-gradient(red, yellow, lime);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Postavljanje zaustavljanja boje lokacije

Granične stanice su tačke duž linije gradijenta koje će imati određenu boju na tom mjestu. Lokacija zaustavljanja boje može se odrediti ili kao procenat ili kao apsolutna dužina. Možete odrediti onoliko zaustavljanja boja koliko želite da biste postigli željeni efekt.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow 30%, lime 60%);
    /* Standardna sintaksa */
    background: linear-gradient(red, yellow 30%, lime 60%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja lokacije zaustavljanja boja</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(red, yellow 30%, lime 60%);
      /* Standardna sintaksa */
      background: linear-gradient(red, yellow 30%, lime 60%);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Ponavljanje linearnih gradijenata

Možete ponoviti linearne gradijente pomoću funkcije repeating-linear-gradient()

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: white;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
    /* Za Internet Explorer 10 */
    background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
    /* Standardna sintaksa */
    background: repeating-linear-gradient(black, white 10%, lime 20%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer ponavljanja linearnih gradijenata</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: white;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
      /* Za Internet Explorer 10 */
      background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
      /* Standardna sintaksa */
      background: repeating-linear-gradient(black, white 10%, lime 20%);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Stvaranje CSS3 radijalnih gradijenata

U radijalnom gradijentu boja izlazi iz jedne tačke i glatko se širi prema van u kružnom ili eliptičnom obliku, umjesto da blijedi iz jedne boje u drugu u jednom smjeru kao kod linearnih gradijenata. Osnovna sintaksa stvaranja radijalnog gradijenta može se napisati kao:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Argumenti funkcije radial-gradient() imaju sljedeće značenje:

  • position (položaj) - Određuje početnu tačku gradijenta, koja se može odrediti u jedinicama (px, em ili procenti) ili ključnoj riječi (lijevo, dole, itd.).
  • shape (oblik) - Određuje oblik završnog oblika gradijenta. To može biti krug ili elipsa.
  • size (veličina) - Određuje veličinu završnog oblika gradijenta. Zadana postavka je najdalja strana.

Sljedeći primjer će vam pokazati kako kreirate radijalni gradijent s ravnomjerno raspoređenim zaustavljanjima u boji.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(red, yellow, lime);
    /* Za Internet Explorer 10 */
    background: -ms-radial-gradient(red, yellow, lime);
    /* Standardna sintksa */
    background: radial-gradient(red, yellow, lime);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer radijalnih gradijenata</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-radial-gradient(red, yellow, lime);
      /* Za Internet Explorer 10 */
      background: -ms-radial-gradient(red, yellow, lime);
      /* Standardna sintaksa */
      background: radial-gradient(red, yellow, lime);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Postavljanje oblika radijalnih gradijenata

Argument oblika funkcije radial-gradient() koristi se za definisanje završnog oblika radijalnog gradijenta. Može uzeti vrijednosni krug ili elipsu. Pogledajmo primjer:

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(circle, red, yellow, lime);
    /* Za Internet Explorer 10 */
    background: -ms-radial-gradient(circle, red, yellow, lime);
    /* Standardna sintaksa */
    background: radial-gradient(circle, red, yellow, lime);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja radijalnih gradijenata oblika</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna zverzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-radial-gradient(circle, red, yellow, lime);
      /* Za Internet Explorer 10 */
      background: -ms-radial-gradient(circle, red, yellow, lime);
      /* Standardna sintaksa */
      background: radial-gradient(circle, red, yellow, lime);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Postavljanje veličine radijalnih gradijenata

Argument veličine funkcije radial-gradient() koristi se za definisanje veličine završnog oblika gradijenta. Veličina se može postaviti pomoću jedinica ili ključnih riječi: closest-side, farthest-side, closest-corner, farthest-corner.

.gradient {
    /* Rezervna zverzija za pretraživače koji ne podržavaju gradijente */
    background: red;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* Za Internet Explorer 10 */
    background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* Standardna sintaksa */
    background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer postavljanja radijalnih gradijenata veličine</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: red;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
      /* Za Internet Explorer 10 */
      background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
      /* Standardna sintaksa */
      background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


Ponavljanje radijalnih gradijenata

Takođe možete ponoviti radijalne gradijente pomoću funkcije repeating-radial-gradient().

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: white;
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
    /* Za Internet Explorer 10 */
    background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
    /* Standardna sintaksa */
    background: repeating-radial-gradient(black, white 10%, lime 20%);
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer ponavljanja radijalnih gradijenata veličine</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: white;
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
      /* Za Internet Explorer 10 */
      background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
      /* Standardna sintaksa */
      background: repeating-radial-gradient(black, white 10%, lime 20%);
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html> 


CSS3 transparentnost i gradijenti

CSS3 gradijenti takođe podržavaju transparentnost. Ovo možete koristiti za stvaranje efekata blijeđenja na pozadinskim slikama pri slaganju više pozadina.

.gradient {
    /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
    background: url("images/sky.jpg");
    /* Za Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* Za Internet Explorer 10 */
    background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* Standardna sintaksa */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer upotrebe transparentnosti s gradijentima</title>
<style>      
  .gradient {
      width: 400px;
      height: 300px;
      /* Rezervna verzija za pretraživače koji ne podržavaju gradijente */
      background: url("/examples/images/sky.jpg");
      /* Za Safari 5.1 to 6.0 */
      background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("/examples/images/sky.jpg");
      /* Za Internet Explorer 10 */
      background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("/examples/images/sky.jpg");
      /* Standardna sintaksa */
      background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("/examples/images/sky.jpg");
  }
</style>
</head>
<body>
    <div class="gradient"></div>
</body>
</html>