CSS árnyékok
A CSS árnyékok vizuális mélységet adnak az elemeknek. A box-shadow tulajdonság dobozokra, míg a text-shadow szövegekre alkalmazható. Ezekkel kiemelhetjük a tartalmat és látványos designokat készíthetünk.
Egyszerű box-shadow példa
Az alábbi példában egy dobozhoz adunk árnyékot, amely jobbra és lefelé vetül, enyhén elmosva. Az árnyék színe áttetsző fekete.
A példában a box-shadow tulajdonság alapvető használatát láthatjuk.
A box-shadow szintaxisa
A box-shadow több paraméterből áll: vízszintes és függőleges eltolás, elmosódás, terjedés és szín. Ezek kombinálásával különböző hatásokat érhetünk el.
| Paraméter | Leírás |
|---|---|
| h-offset | Az árnyék vízszintes eltolása. |
| v-offset | Az árnyék függőleges eltolása. |
| blur-radius | Az árnyék elmosódási sugara. |
| spread-radius | Az árnyék terjedési sugara. |
| color | Az árnyék színe. |
Tippek az árnyékok használatához
Az árnyékokat óvatosan használd, hogy természetes hatást keltsenek, és ne zavarják az olvashatóságot.
- Használj halvány árnyékokat a természetes megjelenés érdekében.
- Kombináld több árnyék alkalmazását egy elemre a mélyebb hatás érdekében.
- Ne vidd túlzásba az árnyékokat, mert ronthatják a dizájn tisztaságát.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
© 2025 ReadyTools. Minden jog fenntartva.