Glass Morphism: matt üveg hatás tárolóra és widgetre

A Glass Morphism az elem mögötti hátteret elmossa, így az elem úgy hat, mint egy matt üveglap a háttér előtt. Nem külön widget, hanem kiterjesztés: bekapcsolás után egy új szakasz jelenik meg a Haladó fülön, CSS írása nélkül használhatod. Az ingyenes bővítmény része, Pro nélkül is működik.

Előkészületek

• Az Elementor legyen telepítve és aktív.
• Kapcsold be a kiterjesztést a The Plus Addons → Extensions oldalon (nem a Widgets oldalon): keresd meg a Glass Morphism kártyát, és kapcsold be a kapcsolóját. Alapból ki van kapcsolva, és amíg ki van, a szakasz nem is látszik a Haladó fülön.
• Az elem háttere legyen félig átlátszó, vagy ne legyen háttere. Tömör szín teljesen elfedi a hatást.
• Az elem mögött kell lennie valaminek: például a szülő tároló háttérképének vagy színének. Ha nincs mit elmosni, nincs látható hatás.

A hatás bekapcsolása

1. Szerkeszd az oldalt az Elementorral. A szülő tárolónak adj háttérképet vagy háttérszínt.
2. Jelöld ki az elemet, amelyet üvegesíteni szeretnél: bármelyik widgetet vagy egy tárolót. Az elem saját háttere legyen félig átlátszó vagy üres.
3. Nyisd meg a Haladó fület, és keresd meg a Glass Morphism szakaszt. A Megjelenítési feltétel szakasz közelében található.
4. Kapcsold be a Glass Morphism kapcsolót. Alatta megjelenik két csúszka.
5. A Blur csúszkával állítsd be, mennyire legyen elmosva a háttér, a Grayscale csúszkával pedig azt, mennyire vesszen el a háttér színe.

https://minta-bolt.hu/wp-admin/post.php?post=364&action=elementor

A képen a bekapcsolt Glass Morphism kapcsoló és a két csúszka látszik az alapértékekkel.

Ennél több beállítás nincs: színt, átlátszóságot, telítettséget, fényerőt vagy rámutatásos változatot nem állíthatsz itt.

Beállítások

Beállítás	Mit csinál	Alapérték
Glass Morphism	Bekapcsolja az üveghatást az elemen. A két csúszka csak bekapcsolt állapotban látszik.	Ki
Blur	Az elem mögött átlátszó háttér elmosásának erőssége képpontban. Tartomány: 1 és 100 között.	10
Grayscale	Mennyire vész el a szín az elem mögött átlátszó háttérből. 0 esetén változatlan, 1 esetén teljesen szürke. Tartomány: 0 és 1 között.	0

Hogyan viselkedik

• Kikapcsolva semmi nem változik. Bekapcsolva, alapértéken a háttér már észrevehetően, de csak enyhén lágyul.
• Az alap Blur (10) szándékosan finom. 50 körül a háttér erősen elmosódik.
• A Grayscale csak az áttetsző háttérre hat, nem magára az elemre. 1 esetén a mögötte látszó háttér teljesen szürke. A skála 0 és 1 közötti szám, nem százalék.
• Tárolón és widgeten is ugyanúgy működik.
• Az elemnek nem kell saját háttér: háttér nélküli kártya is elmossa a mögötte lévőt.

https://minta-bolt.hu/k3-uveg/

A képen a félig átlátszó fehér hátterű kártya mögött a színátmenet elmosva látszik.

Korlátozások

• Teljesen tömör elemháttér elrejti a hatást, és a panel nem szól róla. Adj az elemnek félig átlátszó hátteret, vagy vedd le a hátterét.
• Ha az elem mögött nincs semmi, nincs mit elmosni.
• Csak a Blur és a Grayscale állítható. Minden más külalakot az elem Háttér és Szegély beállításaival érhetsz el.
• Egyik csúszka sem reszponzív: eszközönként nem adhatsz meg külön értéket.
• A kiterjesztés által írt CSS !important jelölésű. Ha a sablonod vagy az egyedi CSS-ed ugyanarra az elemre más backdrop-filter értéket állít, az nem győz.
• A hatás elmosott háttérszűrőre épül, ezért a böngészőtől is függ: a legújabb böngészők támogatják.

Hibaelhárítás

Nincs Glass Morphism szakasz a Haladó fülön. A kiterjesztés ki van kapcsolva. Menj a The Plus Addons → Extensions oldalra, keresd meg a Glass Morphism kártyát, és kapcsold be. A Widgets oldalon hiába keresed.

A kapcsoló be van kapcsolva, de semmi nem változik. Két gyakori ok van. Az elem háttere tömör szín: legyen félig átlátszó, vagy töröld. Vagy nincs semmi az elem mögött: adj a szülő tárolónak háttérképet vagy háttérszínt.

A hatás túl gyenge. Az alap Blur értéke (10) szándékosan finom. Emeld meg: a skála 100-ig megy.