Az üveg morfizmus, vagyis a „liquid glass” effekt egyre népszerűbb megoldás a modern webdesignban. Sokakat érdekel, hogyan lehet ezt a hatást böngészőben, különböző eszközökkel megvalósítani. Ez a videó három különféle módszert mutat be, melyek mindegyike eltérő eredményt és rugalmasságot kínál attól függően, milyen szintű vizuális részletességet és teljesítményt várunk el a projekttől.
Az első megközelítés kizárólag CSS segítségével dolgozik, így nagyon gyors és egyszerű használni, de a vizuális részletek – mint például a pontos fénytörés vagy kromatikus aberráció – itt korlátozottak. A gyorsasága mellett előnye, hogy nincs szükség extra JavaScript vagy SVG kódra, hátránya viszont a vizuális egyszerűség.
Egy másik lehetőség egy React-alapú könyvtár bevezetése, amely nagyobb szabadságot, részletesebb beállítási lehetőségeket és interaktív effekteket tesz lehetővé. Itt az olyan paramétereket, mint a szórás vagy a blur mennyisége, könnyen testre lehet szabni, akár dinamikusan is.
A harmadik, haladóbb technikánál 3D-s közelítést választanak a 3JS vagy Spline Design használatával. Ez a megoldás lehetővé teszi a leghitelesebb üveghatás elérését, ugyanakkor nagyobb erőforrást igényel, mivel vászon (canvas) alapon fut. Az anyagbeállítások, például az átlátszóság vagy a vastagság, finoman szabályozhatók, de megkövetelik, hogy a fejlesztő jártas legyen az összetettebb 3D környezetekben is.
Melyik megoldás bizonyul ideálisnak? Érdemes-e a teljesítmény rovására a valósághűségre törekedni, vagy néha egy egyszerűbb effekt is elegendő? A videó ezekre a kérdésekre keresi a választ, bemutatva az egyes módszerek előnyeit és korlátait.
