Gradienty v CSS

Barevné přechody je v CSS možné vytvářet přes:

1. vlastnost filter pro IE 9
2. background-image pro IE 10 a novější

V prohlížečích starších než Opera 12.1, Firefox 16, Chrome 26 se používají ještě CSS prefixy.

Příklad

Nejjednodušší použití CSS gradientu může vypadat v případě lineárního přechodu takto:

.prechod {
  background-image: linear-gradient(#0D6AB7, #DA3F94);
}

  <style>
    .prechod {
      background-image: linear-gradient(
        #0D6AB7, 
        #DA3F94
      );
    }
  </style>
  <div class="prechod">&nbsp;</div>

Lineární gradient

Funkci linear-gradient se předávají různé parametry ovlivňující výchozí podobu celého přechodu. Symbolický zápis veškerých možností vypadá následovně.

.prechod {
  background-image: linear-gradient(
    směr, 
    první barva umístění,
    druhá barva umístění
  )
}

Směr

První parametr určuje, jakým směrem se má přechod ubírat. Výchozí nastavení je shora dolů.

• to top – zdola nahoru,
• to bottom – shora dolů,
• to right – zleva doprava,
• to left – zprava doleva

Kromě toho existují i šikmé směry, například to bottom right:

  <style>
    .prechod-sikmy {
      background-image: linear-gradient(to bottom right, #0D6AB7, #DA3F94);
    }
  </style>
  <div class="prechod-sikmy">&nbsp;<br>&nbsp;</div>

Umístění barev

Délkovými jednotkami (pixely, procenta apod.) je možné nastavit, kde se daná barva má aplikovat.

Výchozí chování je, že první barva začíná (tj. 0%) a druhá končí (tj. 100%).

Takto se přechod změní při nastavení procent na 60 a 90.

  <style>
    .prechod-umisteni {
      background-image: linear-gradient(
        to bottom right, 
        #0D6AB7 60%, 
        #DA3F94 90%
      );
    }
  </style>
  <div class="prechod-umisteni">&nbsp;<br>&nbsp;</div>

Více barev

Přechod může mít libovolný počet barev.

  <style>
    .prechod-vice-barev {
      background-image: linear-gradient(
        to bottom right, 
        #1081DD, 
        #8ECCF0 40%, 
        #0D6AB7 60%, 
        #DA3F94 90%
      );
    }
  </style>
  <div class="prechod-vice-barev">&nbsp;<br>&nbsp;</div>

Radiální gradient

Další typ gradientu je kruhový (radiální). Zápis je obdobný jako u lineárního.

.prechod-radialni {
  background-image: radial-gradient(#0D6AB7, #DA3F94);
}

  <style>
    .prechod-radialni {
      background-image: radial-gradient(
        #0D6AB7, 
        #DA3F94
      );
    }
  </style>
  <div class="prechod-radialni">&nbsp;<br>&nbsp;<br>&nbsp;</div>

Tvar

První parametr udává tvar kruhového přechodu.

• ellipse – výchozí podoba, přechod se roztáhne přes celý prostor elementu.
• circle – přechod bude mít podobu kruhu.

  <style>
    .prechod-circle {
      background-image: radial-gradient(
        circle,
        #0D6AB7, 
        #DA3F94
      );
    }
  </style>
  <div class="prechod-circle">&nbsp;<br>&nbsp;<br>&nbsp;</div>

V případě, že chceme mít vidět celý kruh (když element s přechodem na pozadí není čtvercový), stačí přidat za tvar (circle) closest-side:

  <style>
    .prechod-closest-side {
      background-image: radial-gradient(
        circle closest-side,
        #0D6AB7, 
        #DA3F94
      );
    }
  </style>
  <div class="prechod-closest-side">&nbsp;<br>&nbsp;<br>&nbsp;</div>

Umístění

Umístění barev funguje stejně jako u lineárního přechodu. Je ale možné změnit střed, odkud přechod začíná, zapsáním at top|bottom|left|right a šikmých kombinací.

  <style>
    .prechod-at {
        width: 100px;
        height: 100px;
      background-image: radial-gradient(
        circle at top right,
        #0D6AB7, 
        #DA3F94
      );
    }
  </style>
  <div class="prechod-at"></div>

Opakující se gradient

Poslední typ gradientu je opakování přechodu do nekonečna.

.prechod-opakovani {
  background-image: repeating-linear-gradient(
    #0D6AB7, #DA3F94 50%
  );
}

  <style>
    .prechod-repeating {
      height: 100px;
      background-image: repeating-linear-gradient(
        #0D6AB7,
        #DA3F94 50%
      );
    }
  </style>
  <div class="prechod-repeating"></div>

Opakovat se může přechod lineární i radiální:

• repeating-linear-gradient,
• repeating-radial-gradient

Proužky

Zajímavější využití opakujících se přechodů je vytvoření proužků.

  <style>
    .prechod-prouzky {
      height: 100px;
      background-image: repeating-linear-gradient(
        #0D6AB7,
        #0D6AB7 10%,
        #DA3F94 10%,
        #DA3F94 20%
      );
    }
  </style>
  <div class="prechod-prouzky"></div>

Otočení

Jde i přechod otočit (např. -45deg) a vytvořit tak třeba šikmé pruhy:

  <style>
    .prechod-otoceny {
      height: 100px;
      background-image: repeating-linear-gradient(
        -45deg,
        #0D6AB7,
        #0D6AB7 5px,
        #DA3F94 5px,
        #DA3F94 10px
      );
    }
  </style>
  <div class="prechod-otoceny"></div>

Přechody vlastností filter

Pro IE 9 a starší je možné některé přechody vytvořit vlastností filter. Vytvořit se tak dá ale nejspíš jen přechod lineární:

.prechod {
  filter: progid:DXImageTransform.Microsoft.Gradient(
    startColorStr="#0D6AB7", 
    endColorStr="#DA3F94"
  );
}

Více o gradientech přes filter.

Fallback

Fallback pro plnohodnotné CSS přechody tedy může být:

1. CSS vlastnost filter pro IE 9 a starší (třeba s méně dokonalým přechodem).
2. Prostá barva bez přechodu. Když se gradient nastaví jako background-image, nastavená vlastnost background-color přežije.
3. Obyčejný obrázek.

V případě každého webu je pochopitlně nutno zvážit, co se vyplatí realisovat.

Generátor CSS gradientů

Pro pohodlnou tvorbu gradientů existují tzv. generátory gradientů.

• ColorSpace: Generate a 3-Color-Gradient
• Ultimate CSS Gradient Generator
• CSS Gradient Background Maker

Nutno přiznat, že výsledný kód plný prefixů není úplně elegantní (ukázka).