Gradienty
Gradienty slouží pro vytvoření pozadí s jemným barevným přechodem, který se skladá ze dvou a více barev
V CSS lze definovat dva druhy gradientů:
- Lineární
- Radiální
Lineární
Pro vytvoření lineárního gradientu se musí definovat nejméně dva barvové záznamy popřípadě směr gradientu
Syntax: linear-gradient(směr, záznam1, záznam2...)
Syntax: linear-gradient(záznam1, záznam2...)
Radiální (elipsovitý, kruhový)
Radiální gradient je definován středem. Pro vytvoření radiálního gradientu zase musíme definovat nejméně dva barvové záznamy
Syntax: radial-gradient(záznam1, záznam2...)
Syntax: radial-gradient(rozměr, záznam1, záznam2...)
Gradienty mohou obsahovat i prefix "repeating-" pro opakování
Editor
Pro živou ukázku je CSS a JavaScript vepsaný přímo v dokumentu - v praxi tyto soubory vždy oddělujte do externích souborů
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 400px;
height: 400px;
background-image: linear-gradient(to right, red , yellow);
}
#div2 {
width: 400px;
height: 400px;
background-image: radial-gradient(farthest-side at 60% 55%, red , yellow);
}
#div3 {
width: 400px;
height: 400px;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#div4 {
width: 400px;
height: 400px;
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>