# Advanced Shadows: alakkövető árnyék (drop shadow) rámutatáskor

> Halmozott drop shadow árnyékok normál és rámutatásos állapotra az Advanced Shadows kiterjesztéssel, átlátszó hátterű képekhez.

A dobozárnyék mindig téglalap, még egy átlátszó PNG vagy SVG körül is. A **drop shadow** a látható alakot követi, így egy csillag csillag alakú árnyékot vet. Az **Advanced Shadows** kiterjesztéssel halmozott drop shadow árnyékokat adhatsz bármely widgethez vagy tárolóhoz, és rámutatásra megváltoztathatod őket, egyedi CSS nélkül.

## 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.
- Az alakkövető hatás átlátszó hátterű képpel (PNG, SVG vagy WebP) látszik. Egy tömör, téglalap alakú képen a drop shadow úgy néz ki, mint a dobozárnyék.

## Rámutatásra változó drop shadow

1. Jelöld ki a widgetet vagy a tárolót, például egy Kép widgetet átlátszó PNG-vel.
2. A **Haladó → Advanced Shadows** alatt kapcsold be a **Drop Shadows** kapcsolót.
3. Az **Apply to** maradjon **Default**, ha mindent árnyékolni akarsz, ami látszik az elemben, vagy válaszd az **Add Custom Class** értéket egy rész célzásához, például egy kártyán belüli egyetlen képhez. 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 (pozitív érték jobbra tolja az árnyékot), Y (pozitív érték lefelé tolja), Blur és Color értéket. A félig átlátszó szín néz ki a legtermészetesebben.
5. Opcionálisan írj be egy **Transition css** értéket, például `all .4s ease`. Ez az egérmutató elhagyásakor animálja a visszaváltást.
6. Nyisd meg a **Hover** fület, kapcsold be a **Hover Drop Shadows** kapcsolót, kattints az **Elem hozzáadása** gombra, és állítsd be a rámutatáskori árnyékokat. Itt is adj meg **Transition css** értéket, hogy a rámutatáskori váltás animált legyen.
7. Frissítsd az oldalt, és a közzétett oldalon mutass a képre.

## Az eredmény

A tesztünkben a csillagnak lágy, a csúcsait követő árnyéka volt. Rámutatáskor rózsaszín izzás és mélyebb árnyék jelent meg, szintén csillag alakban.

## 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. | 0 |
| Color | Az árnyék színe. Izzáshoz vegyél fel 0 eltolású, némi elmosású tételt. | Üres (halvány, átlátszó fekete) |
| Transition css | Bármely CSS-átmenet, például `all .3s ease`. | Üres (nincs animáció) |
| Hover Drop Shadows | Bekapcsolja a rámutatási listát. | Ki |

A drop shadow árnyékoknak nincs **Type** és **Spread** beállításuk. Ez a kettő csak a **Box Shadows** alatt létezik.

## 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.
- Minden tétel ugyanahhoz a szűrőhöz kerül, ezért több drop shadow együtt rajzolódik ki.
- **Default** esetén az árnyékot mindaz veti, ami látszik a widgetben, a szöveget is beleértve.

## Korlátozások

- A drop shadow nem biztos, hogy látszik az Elementor szerkesztővásznán. A Kép 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 téglalap, nem a kép alakja.** A képnek tömör háttere van. Használj átlátszó hátterű PNG-t, SVG-t vagy WebP-t.

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

**Az Add Custom Class nem mutat árnyékot.** Töröld az osztálynév elejéről a pontot.