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

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.