Térhatás témakörök.

Text shadow, másodlagos betű térhatása. Box shadow, másodlagos keret térhatása. Színek Angól neve és kódja! Böngésző visszaléptető ikonjára kattintva, visszatérhetünk ide! Általános szövegformázás.

Területi háttérszínek alapértelmezett meghatározása.
div; img; table; form;

{background-color: red;}

{background-color: yellow;}

{background-color: green;}

{background-color: blue;}

---

Területek háttérszínét meghatározhatjuk, színátmenettel is.

Gradient (színátmenet) meghatározása,
background-image:

CSS stílussal.
Egyenes (linear-gradient) színátmenet, fent / lent.
Top és Bottom (Ez az alapértelmezett. Felső és alsó szín.)
#linear-grad {width:100%; height:150px; background-image: linear-gradient(red, yellow);}

---

Egyenes (linear-gradient) színátmenet, Left és Right ( balról-jobbra. )
#rl-grad {width:100%; height:150px; background-image: linear-gradient(to right, red , yellow);}

---

Átlós (linear-gradient) színátmenet, bottom / right.

#diagonal-grad {width:100%; height:150px; background-image: linear-gradient(to bottom right, red, yellow);}

---

Egyenes színátmenethez, több szín beállításának meghatározása.

#multi-grad {width:100%; height:150px; background-image: linear-gradient(red, yellow, green);}

---

Egyenes színátmenet balról jobbra, szivárvány színével, és szöveggel.

#tobb-grad {width:100%; height:150px; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

---

Átlátszóság használata.

CSS támogatja, színátmenetekhez az átláthatóságot, mely felhasználható halványító hatások létrehozására.

Az átlátszóság hozzáadásához az rgba () függvényt használjuk, a szín beállításának meghatározására.
Az rgba() nem egyenlő az rgb() meghatározással.
rgb()-nél, csak a szín 3 kódját kell megadni. Például a piros = rgb(255,0,0)
rgba()-nál, a szín 3 kódja után, a láthatósági értéket is meg kell adni. Például a piros = rgba(255,0,0,0.5)
Az rgba() függvény utolsó paramétere 0 és 1 közötti érték lehet, ez határozza meg, a szín átlátszóságát:
- 0 a teljes átláthatóságot jelzi.
- 1 a teljes színt jelzi (nincs átlátszóság).

Az rgb szín kódját, 3 színből kell összeállítani: Vörös, Zöld, Kék.
Mindegyik szín értke, 0-a és 255 között lehet.
Például: Fehér = 255,255,255; Fekete = 0,0,0; Piros = 255,0,0; Zöld = 0,255,0; Kék = 0,0,255;

Az rgb() színkódok megtekintéséhez, kattints ide! Majd a böngésző visszaléptető ikonjára kattintva, visszatérhetünk ide!

---

Egyenes átlátszó színátmenet, balról jobbra.

Teljesen átlátszóval kezdődik, majd piros színre vált.
#using-grad {width:100%; height:150px; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

---

Egyenes színátmenet ismétlődéssel.

#repeat-grad{width:100%; height:150px; background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

---

Körkörös színátmenetek.

Egyenletesen elrendezett szín beállítások (ez az alapértelmezett.)
#radial-grad {width:100%; height:150px; background-image: radial-gradient(red, yellow, green);}

---

Körkörös színátmenet - Eltérő távolságban elhelyezkedő színek, %-ban történő beállításával.

Központból induló színátmenet, eltérő távolságban elhelyezkedő, színállásokkal:
#radial-diff-grad {width:100%; height:150px; background-image: radial-gradient(red 5%, yellow 15%, green 60%);}

---

Központból induló, színkészlet alakzatok.

A területi paraméter határozza meg, a színalakzatot.
Alapértelmezett értéke, ellipszis.

Kör alakú, központból induló, színátmenet:
#circle-grad {width:100%; height:150px; background-image: radial-gradient(circle, red, yellow, green);}

---

Körkörös színátmenet ismétlődéssel.

Az ismétlődő radiális gradiens () függvény, a radiális színátmenetek megismételésére szolgál:
#repeat-circle-grad {width:100%; height:150px; background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}

---

Színátmenet különböző kulcsszavak használatával.

Az érték, méret(%) paramétere határozza meg, a színátmenet alakzatát.
Négy értéket vesz figyelembe:
- closest-side (legközelebbi oldal)
- farthest-side (legtávolabbi oldali)
- closest-corner (legközelebbi sarok)
- farthest-corner (legtávolabbi sarok)

#closest-side-grad {width:100%; height:150px; background-image: radial-gradient(closest-side at 60% 55%, red, yellow, blue);}

---

#farthest-side-grad {width:100%; height:150px; background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);}

---

#closest-corner-grad {width:100%; height:150px; background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, blue);}

---

#farthest-corner-grad {width:100%; height:150px; background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);}

---

---

Részletes ismertetőt, lásd a: https://www.w3schools.com/css/css3_border_images.asp címen.