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

> A Glass Morphism kiterjesztés bekapcsolása, a Blur és a Grayscale beállítás, működése és korlátai.

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.

![A Glass Morphism szakasz bekapcsolva, a Blur és a Grayscale csúszkával a Haladó fülön](./kepek/kiterjesztesek-3-uveg-panel.webp)

*A Glass Morphism szakasz bekapcsolva, a Blur és a Grayscale csúszkával a Haladó fülön* (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.

![Üveg hatású kártya színátmenetes háttér előtt a nyilvános oldalon](./kepek/kiterjesztesek-3-uveg-elol.webp)

*Üveg hatású kártya színátmenetes háttér előtt a nyilvános oldalon* (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.