A radial-gradient függvény

A radial-gradient függvény radiális átmenetet határoz meg. Ezt a függvényt olyan tulajdonságokhoz alkalmazzuk, amelyek a háttérképet határozzák meg: background, background-image vagy a keret képét: border-image, background-image-source.

Szintaxis

szelektor {
	background: radial-gradient([forma típus pozíció], szín1 méret1, szín2 méret2...);
}

Értékek

Érték	Leírás
forma	Lehetséges értékek: `ellipse` elliptikus átmenet (alapértelmezett), `circle` kör alakú átmenet.
típus	Meghatározza az átmenet nyújtását. Lehetséges értékek: `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`.
pozíció	A `at` kulcsszó után a pozíció megadható bármilyen mértékegységben vagy a `top`, `bottom`, `left`, `right`, `center` kulcsszavak különböző kombinációival.
szín1	Az átmenet kezdő színe bármilyen szín egységben.
szín2	Az átmenet végszíne bármilyen szín egységben.
méret	Meghatározza az átmenet egy adott színének kiterjedését bármilyen mértékegységben.

Értékek a típushoz

Érték	Leírás
`closest-side`	Az átmenet alakja egybeesik a hozzá legközelebbi blokk oldalával.
`closest-corner`	Az átmenet alakja a legközelebbi sarok távolságának információi alapján számítódik ki.
`farthest-side`	Az átmenet a blokk távolabbi oldaláig terjed.
`farthest-corner`	Az átmenet alakja a legtávolabbi sarok távolságának információi alapján számítódik ki.

Megjegyzés

A típust és a formát fel lehet cserélni, de a pozíciónak az első paraméter végén kell lennie. Az átmenet típusa és mérete nem működnek együtt (logikus, hiszen ütköznek). A méret érvényesül.

Példa . A legegyszerűbb változat

Adjunk meg egyszerűen egy kezdő és egy végszínt:

<div id="elem"></div>

#elem {
	background: radial-gradient(red, blue);
	width: 200px;
	height: 200px;
}

Példa . Adjunk hozzá pozíciót

Állítsuk be a középpont helyzetét: 30px - bal margó, 100px - felső margó:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 100px, red, blue);
	width: 200px;
	height: 200px;
}

Példa . Pozíció százalékban

Állítsuk be a középpont helyzetét százalékban: 30% - bal margó, 50% - felső margó:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30% 50%, red, blue);
	width: 200px;
	height: 200px;
}

Példa . Pozíció kulcsszóval

Használhatjuk a top, bottom, left, right, center kulcsszavakat különböző kombinációkban. Tegyük például az átmenetet jobbra, középre:

<div id="elem"></div>

#elem {
	background: radial-gradient(at right center, red, blue);
	width: 200px;
	height: 200px;
}

Példa . Az átmenet mérete

Ebben az esetben az átmenet a következőképpen fog működni: 0px-tól 20px-ig tiszta piros szín lesz, 20px-tól 60px-ig - átmenet pirosból kékbe, 60px után - tiszta kék:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Példa . Több szín egymás után

Ebben az esetben az átmenet a következőképpen fog működni: 0px-tól 20px-ig tiszta piros szín lesz, 20px-tól 40px-ig tiszta kék szín lesz, 40px -tól 60px-ig - átmenet kékesből zöldbe, 60px után - tiszta zöld:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
	width: 200px;
	height: 200px;
}

Példa . Méret + pozíció

Állítsunk be egyszerre méreteket a különböző színekhez és az átmenet középpontjának pozícióját:

<div id="elem"></div>

#elem {
	background: radial-gradient(at 30px 60px, red 20px, blue 60px);
	width: 200px;
	height: 200px;
}

Példa . Az átmenet alakja

Az átmenet alakját az első paraméter határozza meg és 2 értéket vehet fel: circle (kör alakú átmenet) vagy ellipse (elliptikus átmenet, alapértelmezett). Miért nem láttunk eddig elliptikus átmeneteket, bár ez az alapértelmezett? Mert eddig a blokkok alakja négyszögletes volt. Ha téglalap alakúra változtatjuk az alakot, akkor elliptikus átmenetet fogunk látni:

<div id="elem"></div>

#elem {
	background: radial-gradient(red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Példa . Kerek átmenet

Készítsünk kör alakú átmenetet egy téglalap alakú blokkban. Ehhez az első paraméterben állítsuk be az átmenet alakját a circle kulcsszóval:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Példa . Adjunk hozzá pozíciót

Adjunk hozzá az előző kódhoz pozíciót is:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
	width: 300px;
	height: 200px;
}

Példa . Típus: farthest-corner + circle

Az átmenet alakja a blokk legtávolabbi sarkához való távolság információi alapján számítódik ki:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: farthest-corner + ellipse

Az átmenet alakja a blokk legtávolabbi sarkához való távolság információi alapján számítódik ki:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: farthest-side + circle

Az átmenet a blokk távolabbi oldaláig terjed:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: farthest-side + ellipse

Az átmenet a blokk távolabbi oldaláig terjed:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: closest-corner + circle

Az átmenet alakja a blokk legközelebbi sarkához való távolság információi alapján számítódik ki:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: closest-corner + ellipse

Az átmenet alakja a blokk legközelebbi sarkához való távolság információi alapján számítódik ki:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: closest-side + circle

Az átmenet alakja egybeesik a hozzá legközelebbi blokk oldalával:

<div id="elem"></div>

#elem {
	background: radial-gradient(circle closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Példa . Típus: closest-side + ellipse

Az átmenet alakja egybeesik a hozzá legközelebbi blokk oldalával:

<div id="elem"></div>

#elem {
	background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
	width: 300px;
	height: 200px;
}

Lásd még

a linear-gradient függvényt,
amely lineáris átmenetet hoz létre
a repeating-linear-gradient függvényt,
amely ismétlődő lineáris átmenetet hoz létre
a repeating-radial-gradient függvényt,
amely ismétlődő radiális átmenetet hoz létre