Színátmenetes háttér - CSS 3 gradient

Ezzel a CSS 3 kóddal színátmenetes hátteret állíthatsz be akármilyen elemre, és ezzel megspórolhatod a háttérkép feltöltését is.

Színátmenetes háttér
CSS 3 kóddal

Színátmenetes háttér
CSS 3 kóddal

A kód:

background: -moz-linear-gradient(top left, #00DD00,#0000FF)/* CSS by srmark */;

Piros rész: a gradient kódot a háttérnél, tehát a background-nál kell beírni, azon belül is pontosabban a background-image-hez, tehát ha van egy olyan kódod amiben background-image van és utána a megszokott url()-ben egy link a háttérképre, akkor az egész url()-es részt kell lecserélni a -moz-linear-gradient()-re és a zárójelbe kell írni hogy milyen legyen a háttér

Kék rész: A színátmenet színei, itt vesszővel elválasztva színkódokat kell felsorolni, akármennyi színt lehet beletenni,de minimum 2-t kell. A felsorolás sorrendje alapján lesznek a háttéren a színek, tehát ha a pirossal kezded akkor a piros lesz a kezdő szín, és ha kékkel folytatod akkor kékbe fog átmenni fokozatosan, és kékkel végződik.

Zöld rész: A színátmenet irányát, indulási pontját adhatjuk meg, 2 féle képpen:
Megadhatjuk a az oldalt vagy a sarkot ahonnan indít, és az azzal szemben levő hely lesz a vége a színátmenetnek.
Ez lehet:
left, right, top, bottom <-- ez a 4 a négy oldalt jelenti, és lehet:
left top, right top, left bottom, right bottom <-- ez a 4 pedig a négy sarkot jeletni.
Tehát ha a kódban a zöld rész helyére annyit írsz hogy left, akkor a bal oldalról fog a jobb oldalra irányulni a gradient.
Ha right bottom-ot adsz meg akkor a jobb alsó sarokban kezdődik, és a bal felsőben végződik.
VAGY
Megadhatod a kiinduló pont helyett a színátmenet irányát egy szöggel, ekkora a zöld rész helyére egy számot kell írni 0 és 360 között, majd a deg szót ami a mértékegység tehát a fok.
példa: 0deg, 45deg, 215deg, 350deg.

Mutatok pár példát, a dobozokban megtalálod a gradient kódját, de csak azt a részt ami a zárójelen belül van:

left,#00DD00,#0000FF	top,#00DD00,#0000FF	bottom,#00DD00,#0000FF	right,#00DD00,#0000FF
left top,#00DD00,#0000FF	right top,#00DD00,#0000FF	left bottom,#00DD00,#0000FF	right bottom,#00DD00,#0000FF
0deg,#00DD00,#0000FF	90deg,#00DD00,#0000FF	180deg,#00DD00,#0000FF	270deg,#00DD00,#0000FF
45deg,#00DD00,#0000FF	135deg,#00DD00,#0000FF	225deg,#00DD00,#0000FF	315deg,#00DD00,#0000FF
20deg,#00DD00,#0000FF	35deg,#00DD00,#0000FF	50deg,#00DD00,#0000FF	65deg,#00DD00,#0000FF

Az eddigi színátmenetek mind lineárisak voltak, de lehet készíteni kör vagy ellipszis alakú színátmenetet is.Ekkor a -moz-linear-gradient helyett azt kell írni a kódba hogy -moz-radial-gradient
A zárójelen belül szinte ugyanazokat kell megadni, először a köríves gradient módját majd a színeket.A left right bottom top kifejezéseket szintén használhatjuk, de ha a doboz közepére akarunk egy kört akkor azt kell írni a zöld rész helyére hogy center center.a zöld és a kék rész között meg lehet adni hogy kör van ellipszis legyen, ha nincs megadva semmi akkor auotmatikusan ellipszist csinál, a dobozhoz igazítva. Ha kifejezettén kört akarunk akkor a zöld rész után, vesszővel elválasztva azt írjuk hogy circle
Példa:
-moz-radial-gradient(center center,circle,#00DD00,#0000FF)/* CSS by srmark */;

center center,#00DD00,#0000FF	left,#00DD00,#0000FF	right,#00DD00,#0000FF	top,#00DD00,#0000FF
left top,#00DD00,#0000FF	right top,#00DD00,#0000FF	left bottom,#00DD00,#0000FF	right bottom,#00DD00,#0000FF
center center,circle,#00DD00,#0000FF	left,circle,#00DD00,#0000FF	right,circle,#00DD00,#0000FF	top,circle,#00DD00,#0000FF
left top,circle,#00DD00,#0000FF	right top,circle,#00DD00,#0000FF	left bottom,circle,#00DD00,#0000FF	right bottom,circle,#00DD00,#0000FF
center center,ellipse,#00DD00,#0000FF	left,ellipse,#00DD00,#0000FF	right,ellipse,#00DD00,#0000FF	top,ellipse,#00DD00,#0000FF
left top,ellipse,#00DD00,#0000FF	right top,ellipse,#00DD00,#0000FF	left bottom,ellipse,#00DD00,#0000FF	right bottom,ellipse,#00DD00,#0000FF

Lehetőség van ismételt színátmenetet csinálni, itt a megadott színek nincsenek fixen egy ponthoz rögzítve, hanem a kezdő és a végpont között ismétlődnek, megadott periódusban, amit pixel-ben adhatunk meg, magyarul ilyen vastag lesz a csíkozás.Az ismételt színátmenethez a -moz-linear-gradient-et át kell írni arra hogy: -moz-repeating-linear-gradient
a -moz-radial-gradient-et pedig arra hogy: -moz-repeating-radial-gradient
A zárójelen belül annyi változás van hogy a színeknél meg kell adni egy számot px mértékegységgel, hogy milyen vatag legyen a csíkozás:

left,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top left,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top right,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px
left,#00DD00 0px,#0000FF 5px,#0000FF 5px,#00DD00 10px	left,#00DD00 0px,#0000FF 10px	left,#00DD00 0px,#0000FF 25px,#0000FF 25px,#00DD00 50px	left,#00DD00 0px,#0000FF 50px
top left,#00DD00 0px,#0000FF 5px,#0000FF 5px,#00DD00 10px	top left,#00DD00 0px,#0000FF 10px	top left,#00DD00 0px,#0000FF 25px,#0000FF 25px,#00DD00 50px	top left,#00DD00 0px,#0000FF 50px

left,circle,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top,circle,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top left,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	top right,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px
left,circle,#00DD00 0px,#0000FF 5px,#0000FF 5px,#00DD00 10px	left,circle,#00DD00 0px,#0000FF 10px	left,circle,#00DD00 0px,#0000FF 25px,#0000FF 25px,#00DD00 50px	left,circle,#00DD00 0px,#0000FF 50px
top left,#00DD00 0px,#0000FF 5px,#0000FF 5px,#00DD00 10px	top left,#00DD00 0px,#0000FF 10px	top left,#00DD00 0px,#0000FF 25px,#0000FF 25px,#00DD00 50px	top left,#00DD00 0px,#0000FF 50px
center center,#00DD00 0px,#00DD00 5px,#0000FF 5px,#0000FF 10px	center center,#00DD00 0px,#0000FF 5px,#0000FF 5px,#00DD00 10px	center center,#00DD00 0px,#0000FF 25px,#0000FF 25px,#00DD00 50px	center center,#00DD00 0px,#0000FF 50px

Színnek megadhatsz RGBA színkódot is (erről ITT olvashatsz), így egyes színeket részben van teljesen átlátszóvá tehetsz

center center,rgba(0,255,0,0.8) 0px,#0000FF 25px,#0000FF 25px,rgba(0,255,0,0.8) 50px

center center,rgba(0,255,0,0.6) 0px,#0000FF 25px,#0000FF 25px,rgba(0,255,0,0.6) 50px

center center,rgba(0,255,0,0.4) 0px,#0000FF 25px,#0000FF 25px,rgba(0,255,0,0.4) 50px

center center,rgba(0,255,0,0.2) 0px,#0000FF 25px,#0000FF 25px,rgba(0,255,0,0.2) 50px

Ez a kód nagyon sok féle képpen megvalósítható, ezért nagyon bonyolultnak tűnhet. Ha nem sikerül megcsinálnod akkor írd le hogy pontosan milyet szeretnél és megírom neked a kódját.