# Advanced Shadows: neumorfizmus hatás

> Domború vagy benyomott neumorf hatás két halmozott dobozárnyékkal, az Advanced Shadows kiterjesztéssel, kód nélkül.

A neumorfizmus olyan hatást ad, mintha az elem kidomborodna az oldalból, vagy belenyomódna. Egy világos és egy sötét árnyékot használ egy olyan elemen, amelynek ugyanaz a színe, mint a háttérének. Az Elementor doboz-árnyék vezérlője csak egy árnyékot tárol, az **Advanced Shadows** kiterjesztéssel viszont mindkettőt egymásra rakhatod, kód 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 értékekhez használhatsz egy generátort, például a neumorphism.io-t, amely megadja a háttérszínt és a két `box-shadow` értéket.

![A Haladó fül Advanced Shadows szakasza a három kapcsolóval: Box Shadows, Text Shadows, Drop Shadows](./kepek/kiterjesztesek-2-arnyek-panel.webp)

*A Haladó fül Advanced Shadows szakasza a három kapcsolóval: Box Shadows, Text Shadows, Drop Shadows* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

A képen a három kapcsoló látszik. Neumorfizmushoz a **Box Shadows** kell.

## A neumorf hatás elkészítése

1. Adj a tárolónak háttérszínt, például `#e0e0e0`.
2. Tegyél bele egy widgetet. A példa az Ikon widgetet használja, a **Nézet** értéke **Halmozott**, a **Stílus** fülön pedig az elsődleges szín (az ikon mögötti kör) ugyanaz a `#e0e0e0`.
3. A **Haladó → Advanced Shadows** alatt kapcsold be a **Box Shadows** kapcsolót.
4. Állítsd az **Apply to** értékét **Add Custom Class**-ra, és az **Enter Custom Class Name** mezőbe írd be: `elementor-icon`, így az árnyék a kerek ikonon lesz, nem a négyzet alakú widgeten. Az osztálynevet a vezető pont nélkül írd: `elementor-icon`, nem `.elementor-icon`. A mező helykitöltő szövege ponttal kezdődik, de pontos névvel az árnyék egyáltalán nem érvényesül.
5. A **Normal** fülön kattints az **Elem hozzáadása** gombra a sötét árnyékhoz: **Type** Outset, X 18, Y 18, Blur 35, Spread 0, szín `#bebebe`.
6. Kattints újra az **Elem hozzáadása** gombra a világos árnyékhoz: X -18, Y -18, Blur 35, Spread 0, szín `#ffffff`.
7. Frissítsd az oldalt, és nyisd meg.

![Az Advanced Shadows szakasz bekapcsolt Box Shadows kapcsolóval, az Apply to listával és a Normal/Hover fülekkel](./kepek/kiterjesztesek-2-arnyek-doboz.webp)

*Az Advanced Shadows szakasz bekapcsolt Box Shadows kapcsolóval, az Apply to listával és a Normal/Hover fülekkel* (https://minta-bolt.hu/wp-admin/post.php?post=361&action=elementor)

A képen a bekapcsolt **Box Shadows** látszik az **Apply to** listával, a **Normal** és **Hover** fülekkel és a **Transition css** mezővel. Itt veszed fel a két árnyéktételt.

A közzétett oldalon az ikon ezután kidomborodni látszik a háttérből.

## Domború vagy benyomott

| Kinézet | Típus | Értékek |
| --- | --- | --- |
| Domború (mint fent) | Mindkét tételnél Outset | A sötét árnyék jobbra lent, a világos balra fent |
| Benyomott | Mindkét tételnél Inset | Ugyanazok az értékek, az árnyékok az alakzat belsejébe kerülnek |

Ha a kettő között animálni akarsz, vedd fel a domború készletet a **Normal** fülön, kapcsold be a **Hover Box Shadows** kapcsolót a **Hover** fülön, vedd fel ott a benyomott készletet, és a **Transition css** mezőbe írj be egy értéket, például `all .3s linear`.

## Hogyan viselkedik

- A hatás csak akkor működik, ha az elem és a háttere ugyanolyan színű.
- Mindkét tételt egyetlen árnyéklistaként rajzolja ki.
- Ugyanazok az árnyékok érvényesek minden eszközméretnél.

## Korlátozások

- A **Blur** csúszka 10 képpontnál megáll. A tesztünkben a 35 képpontos elmosás a csúszka melletti számmezőben megjelent, és az oldalon helyesen kirajzolódott.
- Az osztálynevet vezető pont nélkül kell beírni.

## Hibaelhárítás

**Nem jelenik meg árnyék az ikonon.** Nézd meg, hogy az osztálynév nem kezdődik-e ponttal. A `.elementor-icon` névvel semmi sem rajzolódik ki.

**Az árnyék négyzet alakú, nem kerek.** Az **Apply to** értéke **Default**, amely a teljes widgetdobozt árnyékolja. Válts **Add Custom Class**-ra, és célozd az `elementor-icon` osztályt.