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

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.