Mi az a glassmorfizmus?

Last update:

A glassmorfizmus a mostani időszak egy népszerűbb dizájntrendje, habár már korábban is használta az Apple (iOS 7) és a Microsoft (Vista) is. Az Apple a Big Surral hozta vissza 2020. novemberében ezt a vonalat, és azóta egyre felkapottabb. Az irányzat természetesen megjelent a webdizájnban is, és itt is egyre népszerűbb. A glassmorfizmust gyakorlatilag úgy írhatjuk le, mint objektumok üvegszerű dizájnját.

Stílusjegyei közé tartozik a tejüveg-szerű átlátszóság, a többrétegű hatás, az élénk színek és a finom, halvány szegélyek használata. A többrétegűségnek és az átlátszóságnak köszönhetően a felhasználók számára könnyebben érzékeltethető a hierarchia. Emellett mélységet adhatunk a felületeknek.

Üvegszerű kialakítás. Ez a glassmorfizmus.

A glassmorfizmus jegyei részletesen

Átlátszóság

A részlegesen átlátszó, tejüveg-szerű hatást az objektumon beállított erős átlátszósággal és az objektum hátterének elmosásával érjük el (backdrop-blur). Így gyakorlatilag mélységet adunk a dizájnnak, hiszen a blokkunk a szem számára már nem egy dimenzióban van a háttérrel, hanem az átlátszóság miatt kiemelkedik abból.

Többrétegű hatás

A többrétegű hatás a fenti backdrop-blur használatából következik. Mivel sikerült kiemelnünk a háttérből az objektumot, már látszólag több réteggel dolgozunk. A box shadow szintén ugyanezt teszi, viszont abból hiányzik ez a fajta könnyedség, úszó-hatás, mégpedig az átlátszóság hiánya miatt. (Bár egy negatív spread értékkel is elérhetünk valami kissé hasonlót.)

Élénk színek

A blokk “mögötti” élénk háttérszín(ek) kiemelik az elmosott átlátszóságot. Ennek igen nagy jelentősége van. A háttérszín(ek) legyenek erős(ek), de kifinomult(ak), hogy az üvegszerű hatás jól kiemelkedjen. Egy tompa háttérszín egyszerűen kevés ehhez az effekthez. Sőt, előnyösebb, ha mozgalmasabb a háttér. Hasonlítsd össze a cikk elején található képet az alábbival:

Glassmorfizmus egyszínű háttéren.

Bár a háttér a második, egyszínű esetben sem tompa, az üveghatás jobban kijön, ha több színen fekszik. Nem rossz a második sem, de az első jobb.

Halvány szegélyek

A halvány szegélyek inkább opcionálisak, mint szükségesek, de ezek a vékony, 1 pixeles, kissé transzparens szegélyek sokat jelentenek abban, hogy az objektum kiemelkedjen a háttérből. Emellett mélységet is ad ezzel a blokknak, így erősítve a 3D hatást.

Előnyei

Trendi, ezért modern kinézetet kölcsönözhetünk az oldalnak. Olyan óriásokat követve, mint az Apple vagy a Microsoft talán nagy bakot nem lövünk. Természetesen itt is hangsúlyos az a javaslat, hogy ne használjunk belőle túl sokat. Inkább tekintsük desszertnek, semmint főfogásnak.

Az egyediség is egy fontos szempont. Bár a glassmorfizmus terjed, de nem egy általános bevett dizájngyakorlat. Szóval, ha ezt az effektet használjuk néhány elemen az oldalunkon, akkor kitűnhetünk a tömegből. Ha kíváncsi vagy rá, hogy milyen látványos megoldásokat lehet létrehozni, nézd meg, a Dribble releváns gyűjteményét.

Hátrányai

Az egyik gyakran említett hátrány az akadálymentesítés. A kontrasztarány miatt az olvashatóság időnként kérdéseket vethet fel. A kontraszt hiánya kellemetlenséget okozhat a színvak vagy látássérült felhasználóknak. Ezért a glassmorfizmus elsősorban dekorációs célú megoldás.

A fenti hátrány kiküszöbölése érdekében válasszuk meg jól a színeket, és törekedjünk a minél jobb kontrasztarány kialakítására. Nem szabad elfelejteni, hogy a Google figyeli az akadálymentes kialakítást.

Használata

A glassmorfizmust négy egyszerű lépéssel könnyedén beépíthetjük az oldalunk dizájnjába. Szinte minden elemet elkészíthetünk ilyen módon. Az egyszerűség kedvéért a négy lépést egy kártyán mutatom be. Az alábbi struktúrát használom:

<section class="body">
   <div class="cards-container">
      <div class="card-container">
          <img class="card-img">
          <h3 class="card-h3">...</h3>
          <p class="card-par">...</p>
      </div>
      <div class="card-container">
          <img class="card-img">
          <h3 class="card-h3">...</h3>
          <p class="card-par">...</p>
      </div>
      <div class="card-container">
          <img class="card-img">
          <h3 class="card-h3">...</h3>
          <p class="card-par">...</p>
      </div>
   </div>
</section>

A effektet a következő elemeken szeretném megjeleníteni:

card-container

1. Válaszd ki a megfelelő rétegeket

Válassz erős, de kellemes színeket a szakasz hátterének (class: “body” vagy “cards-container”). Ha lehet, több színből álljon a háttér az effekt hatásossága érdekében.

2. Alakítsd üvegszerűre

Eddig a kártya szülő-elemein dolgoztunk, most kezdjünk el foglalkozni magával a kártyával. Az érintett elem a következő:

card-container

A CSS-ben add a következő tulajdonságokat és értékeket a fenti elemnek:

background: rgba( 255, 255, 255, 0.15 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );

A fenti kódban bátran cseréld ki a színeket és módosítsd az elmosás (blur) értékét is. Érdemes kísérletezni.

3. Adj neki mélységet

Mélységet egy finom szegély hozzáadásával érhetünk el.

border: 1px solid rgba( 255, 255, 255, 0.18 );

Ha pedig szeretnénk szép, gömbölyded szegélyt, akkor illesszünk hozzá még ezt a sort:

border-radius: 10px;

Az egységes dizájn érdekében érdemes a border-radius értékét az oldalon használt értékre módosítani.

4. Ellenőrizd a mennyiséget

Miféle mennyiséget? Azt, hogy milyen mértékben használtad a glassmorfizmust az oldaladon. Egy jó tanács: Ne told túl! Senki sem akar egy üveglapok keresztül nézni egy honlapot. A dizájn sosem homályosíthatja el a funkciót, hiszen végső soron a honlap egy eszköz, nem egy művészeti alkotás az esetek többségében. És mint ilyen, a legfontosabb a funkció.

Zárszó

A glassmorfizmus egy újra megjelent, és egyre felkapottabb dizájntrend, ami a webes fejlesztésekben is megvetette a lábát. Érdekes és látványos megoldásokat hozhatunk létre vele, így nívósabb honlapokat hozva világra.

Back to Posts