A linear-gradient függvény
A linear-gradient függvény lineáris
gradienseket határoz meg. Olyan tulajdonságokhoz használjuk,
amelyek a háttérképet határozzák meg: background,
background-image
vagy a szegély képét: border-image,
background-image-source.
Szintaxis
szelektor {
background: linear-gradient([szög vagy irány], szín1 méret1, szín2 méret2...);
}
Értékek
| Érték | Leírás |
|---|---|
| irány |
Meghatározza a gradienst irányát bármilyen szövegységben
vagy kulcsszavakkal: top, left, right, bottom
vagy ezek kombinációjával: top left, top right stb.
A szavak sorrendje nem számít: írhatunk top left és left top,
nincs különbség. A paraméter opcionális: ha nem adjuk meg, a gradienst
fentről lefelé halad (mint a to top esetén). Az irány elé a to szót írjuk.
|
| szög | Szög bármilyen szövegységben. Lehet pozitív vagy negatív. A paraméter opcionális. Egyszerre csak vagy szög, vagy irány adható meg (vagy egyik sem). |
| szín1 | A gradienst kezdő színe bármilyen színegységben. |
| szín2 | A gradienst záró színe bármilyen színegységben. |
| méret | Meghatározza egy adott szín kiterjedését a gradienstben bármilyen mértékegységben. |
Példa . A legegyszerűbb változat
Szintaxis:
szelektor {
background: linear-gradient(kezdő szín, záró szín);
}
Nézzük meg egy példán:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Példa . Szög hozzáadása
Szintaxis:
szelektor {
background: linear-gradient(szög, kezdő szín, záró szín);
}
Nézzük meg egy példán:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Példa . Irány hozzáadása
A szög helyett hozzáadhatunk irányt is:
top, left, right, bottom
vagy ezek kombinációját: top left, top right
Az irány elé a to szót írjuk.
Szintaxis:
szelektor {
background: linear-gradient(irány, kezdő szín, záró szín);
}
Nézzük meg egy példán:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Példa . Másik irány megadása
Adjunk meg másik irányt:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Példa . Méret hozzáadása
Szintaxis:
szelektor {
background: linear-gradient(szín1 méret1, szín2 méret2);
}
A következő példában a viselkedés a következő lesz:
tiszta piros szín 0px-tól
30px-ig, 30px-tól 50px-ig
pirosból kékbe gradienst, majd
50px-től a végéig - tiszta kék:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Példa . Több mint 2 szín hozzáadása
Szintaxis:
szelektor {
background: linear-gradient(szín1 méret1, szín2 méret2, szín3 méret3...);
}
A következő példában a viselkedés a következő lesz:
tiszta piros szín 0px-tól
30px-ig, 30px-tól 50px-ig
pirosból kékbe gradienst, majd
50px-től 70px-ig - kéket zöldbe gradienst,
majd 70px után - tiszta zöld:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Példa . Éles átmenetek
A következő példában a viselkedés a következő lesz:
tiszta piros szín 0px-tól
30px-ig, tiszta kék - 30px-től
60px-ig, tiszta zöld - 60px után
(a red 0px nem kötelező):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Példa . A méret megadható százalékban is
A következő példában a viselkedés a következő lesz:
tiszta piros szín 0%-tól
30%-ig, tiszta kék - 30%-től
60%-ig, tiszta zöld - 60% után
(a red 0% nem kötelező):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Példa . Kombinálás background-size-szal
A következő példában a viselkedés a következő lesz:
tiszta piros szín 0px-tól
30px-ig, tiszta kék - 30px-től
60px-ig, miközben mindez ismétlődni fog
60px-es darabokban (a background-size:
60px; miatt):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Lásd még
-
a
radial-gradientfüggvényt,
amely radiális gradienseket hoz létre -
a
repeating-linear-gradientfüggvényt,
amely ismétlődő lineáris gradienseket hoz létre -
a
repeating-radial-gradientfüggvényt,
amely ismétlődő radiális gradienseket hoz létre
