# Advanced Shadows: szövegárnyék, amely rámutatáskor változik

> Halmozott szövegárnyékok normál és rámutatásos állapotra, átmenettel, az Advanced Shadows kiterjesztéssel.

A szövegárnyék, amely akkor változik, amikor az egérmutató egy címsor fölé ér, apró részlet, amitől az oldal interaktívnak hat. Általában egyedi CSS kell hozzá. Az **Advanced Shadows** kiterjesztéssel egy listát adsz meg a normál állapotra, egy másikat a rámutatásra, és köztük választható animációt.

## Előkészületek

- A kiterjesztés az ingyenes bővítmény része, és a Pro-val is ugyanúgy működik.
- Kapcsold be az **Advanced Shadows** kiterjesztést a **The Plus Addons → Extensions** oldalon, a **Plus Effects** csoportban. Alapból ki van kapcsolva.
- A beállítások helye: jelölj ki egy widgetet vagy tárolót, nyisd meg a **Haladó** fület, és bontsd ki az **Advanced Shadows** szakaszt, közvetlenül az **Egyedi CSS** felett.

## Rámutatásra változó szövegárnyék

1. Jelölj ki egy szöveges widgetet, például egy Címsort, vagy egy szöveget tartalmazó tárolót.
2. A **Haladó → Advanced Shadows** alatt kapcsold be a **Text Shadows** kapcsolót.
3. Az **Apply to** maradjon **Default**, ha az elem minden szövegét árnyékolni akarod, vagy válaszd az **Add Custom Class** értéket egy rész célzásához. Az osztálynevet vezető pont nélkül írd (`elementor-icon`, nem `.elementor-icon`). A mező helykitöltő szövege ponttal kezdődik, de ponttal az árnyék egyáltalán nem érvényesül.
4. A **Normal** fülön kattints az **Elem hozzáadása** gombra, és állítsd be az X, Y, Blur és Color értéket. Több tétellel árnyékokat halmozhatsz.
5. Opcionálisan írj be egy **Transition css** értéket, például `all .4s linear`. Ez az egérmutató elhagyásakor animálja a visszaváltást.
6. Nyisd meg a **Hover** fület, kapcsold be a **Hover Text Shadows** kapcsolót, és vedd fel a rámutatáskor kívánt tételeket.
7. Ezen a fülön is adj meg **Transition css** értéket, hogy a rámutatáskori váltás is animált legyen.
8. Frissítsd az oldalt, és a közzétett oldalon mutass a szövegre.

## Az eredmény

A tesztünkben a címsornak halvány szürke árnyéka volt, rámutatásra pedig élénk rózsaszín és kék dupla árnyékra váltott.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| X / Y | Az árnyék eltolása, -250 és 250 képpont között. | 0 |
| Blur | Lágyság, a csúszkán 0 és 10 képpont között. A 0 éles, grafikus árnyékot ad. | 0 |
| Color | Az árnyék színe. | Üres (halvány, átlátszó fekete) |
| Transition css | Bármely CSS-átmenet, például `all .3s linear`. | Üres (nincs animáció) |
| Hover Text Shadows | Bekapcsolja a rámutatási listát. | Ki |

## Hogyan viselkedik

- A rámutatási lista a normál listát váltja fel, amíg az egérmutató az elem fölött van.
- **Default** esetén az árnyék az egész widgeten van, ezért az akkor is érvényesül, ha a mutató a widget üres részén áll, nem csak a betűk fölött.

## Korlátozások

- Az árnyék nem biztos, hogy látszik az Elementor szerkesztővásznán. A Címsor widgeten nem láttuk. Nézd meg előnézetben vagy a közzétett oldalon.
- A rámutatáshoz egér vagy érintőpad kell, ezért az érintőképernyős látogatók nem feltétlenül látják a rámutatási árnyékokat.

## Hibaelhárítás

**Az árnyék nem változik rámutatáskor.** Nézd meg, hogy a **Hover Text Shadows** be van-e kapcsolva, és van-e legalább egy tétele.

**A váltás azonnali, nem sima.** Adj meg **Transition css** értéket a **Normal** és a **Hover** fülön is.