Advanced Shadows: neumorfizmus hatás

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.

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.

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.