{"id":28701,"date":"2024-07-17T12:37:08","date_gmt":"2024-07-17T10:37:08","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=28701"},"modified":"2024-09-03T12:09:41","modified_gmt":"2024-09-03T10:09:41","slug":"glassmorphism-con-css-un-nuovo-approccio","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/ux-design\/glassmorphism-con-css-un-nuovo-approccio\/","title":{"rendered":"Glassmorphism con CSS: un nuovo approccio!"},"content":{"rendered":"\n

Il Glassmorphism \u00e8 una tendenza nel design che mira a replicare l’aspetto e le propriet\u00e0 del vetro negli elementi dell’interfaccia o di un contenuto. Questo stile si caratterizza per l’uso di trasparenza, sfocatura e effetti di luce<\/strong> per creare l’illusione di superfici vetrose.<\/p>\n\n\n\n

Diciamoci la verit\u00e0: un vetro trasparente non \u00e8 la cosa pi\u00f9 pratica dove scrivere<\/strong>, e scrivere un tutorial evidenzia subito quanto non sia facile generalizzare un design perch\u00e9 sia adatto in tutti gli scenari e soprattutto a tutti gli utenti. Tuttavia, mettiamo da parte le best-practice e esploriamo diversi modi interessanti per ottenere un effetto vetro solo con CSS!<\/p>\n\n\n\n

Un approccio diverso<\/h2>\n\n\n\n

Nella mia esperienza l’aspetto pi\u00f9 frustrante nell’implementare un design basato sul glassmorphism \u00e8 che le possibilit\u00e0 date dal CSS sembrano infinite<\/a> e nei vari snippet che troviamo o che generano i nostri assistenti virtuali non si capisce la relazione tra propriet\u00e0 CSS e effetto realistico!<\/p>\n\n\n\n

Ci sono mille ricette e tutte danno effetti fantastici: ma come si arriva a quegli effetti senza procedere a caso?<\/strong><\/p>\n\n\n\n

Per creare un effetto vetro convincente, dobbiamo chiederci: cosa rende un vetro tale? Cosa “vende l’effetto”?<\/p>\n\n\n\n

Pensiamo a questi elementi chiave:<\/p>\n\n\n\n

    \n
  1. Trasparenza: Il vetro permette di vedere attraverso, anche se non sempre in modo completamente chiaro.<\/li>\n\n\n\n
  2. Blur: Gli oggetti dietro il vetro appaiono sfocati, non nitidi.<\/li>\n\n\n\n
  3. Smussatura dei bordi: I bordi del vetro spesso hanno una leggera smussatura che riflette la luce in modo particolare.<\/li>\n\n\n\n
  4. Spessore: Il vetro ha una certa profondit\u00e0, che si pu\u00f2 percepire osservando i suoi bordi.<\/li>\n<\/ol>\n\n\n\n

    Il nostro approccio seguir\u00e0 quindi alcune regole d’oro:<\/p>\n\n\n\n

      \n
    1. Riflettiamo su quale propriet\u00e0 vogliamo dare al nostro elemento prima di lasciarci andare con numeri a caso nelle formule<\/li>\n\n\n\n
    2. Procediamo per “baby step”<\/li>\n\n\n\n
    3. Organizziamo le nostre classi per rappresentare chiaramente i materiali e la loro logica<\/li>\n<\/ol>\n\n\n\n

      Pronti a creare la vostra collezione di materiali vetrosi?<\/p>\n\n\n\n

      Iniziamo con uno scenario simpatico e versatile: una web app per mostrare il meteo e l’orario, magari da installare come PWA sul vostro vecchio tablet per trasformarlo in un simpatico regalo! <\/p>\n\n\n\n

      Layout base: una app con orario, temperatura e meteo<\/h2>\n\n\n\n

      Iniziamo con un layout base per la nostra app meteo:<\/p>\n\n\n

      <!DOCTYPE html<\/span>><\/span>\n<\/span><\/span><html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><head<\/span>><\/span>\n<\/span><\/span>    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n<\/span><\/span>    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span>><\/span>\n<\/span><\/span>    <title<\/span>><\/span>Glass Meteo and Clock<\/title<\/span>><\/span>\n<\/span><\/span>    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"styles.css\"<\/span>><\/span>\n<\/span><\/span>    <link<\/span> rel<\/span>=\"manifest\"<\/span> href<\/span>=\"manifest.json\"<\/span>><\/span>\n<\/span><\/span>    <meta<\/span> name<\/span>=\"theme-color\"<\/span> content<\/span>=\"#ffffff\"<\/span>><\/span>\n<\/span><\/span>    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined&display=block\"<\/span> \/><\/span>\n<\/span><\/mark>    <script<\/span> type<\/span>=\"module\"<\/span> src<\/span>=\"app.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/span><\/span><\/head<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><body<\/span>><\/span>\n<\/span><\/span>    <main<\/span> class<\/span>=\"room\"<\/span>><\/span>\n<\/span><\/span>        <div<\/span> id<\/span>=\"dashboard\"<\/span> class<\/span>=\"glass meteo-info\"<\/span>><\/span>\n<\/span><\/span>              <div<\/span> id<\/span>=\"time\"<\/span>><\/span>20:30<\/div<\/span>><\/span>\n<\/span><\/span>              <div<\/span> id<\/span>=\"weather\"<\/span>><\/span>\n<\/span><\/span>                <span<\/span> class<\/span>=\"material-symbols-outlined\"<\/span>><\/span>clear_day<\/span<\/span>><\/span>\n<\/span><\/mark>              <\/div<\/span>><\/span>\n<\/span><\/span>          <div<\/span> id<\/span>=\"meteo\"<\/span>><\/span>\n<\/span><\/span>              <div<\/span> id<\/span>=\"temperature\"<\/span>><\/span>35.5&deg;<\/span>C<\/div<\/span>><\/span>\n<\/span><\/span>            <div<\/span> id<\/span>=\"location\"<\/span>><\/span>Rome, Italy<\/div<\/span>><\/span>\n<\/span><\/span>            <\/div<\/span>><\/span>\n<\/span><\/span>          <\/div<\/span>><\/span>\n<\/span><\/span>      <\/main<\/span>><\/span>\n<\/span><\/span><\/body<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><\/html<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
      Nel nostro index.html<\/code> stiamo caricando un CSS dal Google Fonts Icons & Symbols<\/p>\n\n\n\n
      \"Google<\/figure>
      \n
      Nel nostro index.html stiamo caricando un CSS dal Google Fonts Icons & Symbols che ci permetter\u00e0 di avere una icona per ogni condizione meteo!<\/p>\n\n\n\n
      Se preferite potete anche usare delle emoji \ud83c\udf24\ufe0f\u2600\ufe0f\ud83c\udf27\ufe0f<\/p>\n<\/div><\/div>\n\n\n\n
      Diamo un po’ di struttura e per facilitare la nostra esplorazione con un po’ di CSS che centra le informazioni meteo nella nostra schermata:<\/p>\n\n\n
      :root<\/span> {\n    font-family<\/span>: system-ui, sans-serif;\n    font-size<\/span>: clamp<\/span>(1rem<\/span>, 10vw<\/span>, 5rem<\/span>);\n}\n\n* {\n    margin<\/span>: 0<\/span>;\n    padding<\/span>: 0<\/span>;\n    line-height<\/span>: 1<\/span>;\n}\n\nmain<\/span> {\n    block-size<\/span>: 100vh<\/span>;\n    margin<\/span>: 0<\/span>;\n    display<\/span>: flex;\n    justify-content<\/span>: center;\n    align-items<\/span>: center;\n}\n\n.meteo-info<\/span> {\n    display<\/span>: grid;\n    grid-template-columns<\/span>: 1<\/span>fr 2<\/span>fr;\n    grid-template-areas<\/span>: \"time time\"<\/span> \"weather meteo\"<\/span>;\n    gap<\/span>: 1rem<\/span>;\n    transition<\/span>: font-size 0.2s<\/span> cubic-bezier<\/span>(0.6<\/span>, -0.28<\/span>, 0.74<\/span>, 0.05<\/span>), opacity 0.5s<\/span> linear;\n}\n\n.meteo-info<\/span>>div<\/span> {\n    display<\/span>: flex;\n    justify-content<\/span>: center;\n    align-items<\/span>: center;\n}\n\n#time<\/span> {\n    grid-area<\/span>: time;\n    font-size<\/span>: 200%<\/span>;\n    font-weight<\/span>: 900<\/span>;\n}\n\nspan<\/span>.material-symbols-outlined<\/span> {\n    font-size<\/span>: inherit;\n    max-width<\/span>: 1ch<\/span>;\n}\n\n#weather<\/span> {\n    grid-area<\/span>: weather;\n    font-size<\/span>: 120%<\/span>;\n}\n\n#meteo<\/span> {\n    grid-area<\/span>: meteo;\n    display<\/span>: flex;\n    flex-direction<\/span>: column;\n    align-items<\/span>: flex-start;\n}\n\n#location<\/span> {\n    font-size<\/span>: 50%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"Simulazione<\/figure>
      \n
      Tra i device che possiamo simulare in Google Chrome c’\u00e8 anche un Nest Hub Max che \u00e8 perfetto per il nostro esercizio!<\/p>\n<\/div><\/div>\n\n\n\n
      Lo sfondo: da problema a punto di forza del nostro design!<\/h2>\n\n\n\n
      Come possiamo apprezzare il nostro effetto vetro senza qualcosa dietro?<\/p>\n\n\n\n
      \u00c8 evidente che non tutte le foto sono adatte a fare da sfondo e sar\u00e0 necessario adattare il colore del testo perch\u00e9 sia visibile. Questo \u00e8 il punto debole del glassmorphism<\/em> che ne limita l’uso a specifici scenari. Tuttavia questo tutorial vuole proprio abbattere il taboo che se una tecnica non \u00e8 universale allora non merita essere studiata!<\/p>\n\n\n\n
      \"Simulazione<\/figure>
      \n
      Abbracciamo la specificit\u00e0 e scegliamo una bella foto in Public Domain (CC-Zero by Gray Wooden Sideboard)<\/p>\n<\/div><\/div>\n\n\n\n
      Aggiungiamo quindi una classe room<\/code> al nostro main<\/code> e mettiamo un elegante bianco come colore per il nostro font (e simbolo), carichiamo il nostro sfondo e impostiamo la propriet\u00e0 background-size<\/code> a cover<\/code> per fare in modo che sia ben visibile su diversi display:<\/p>\n\n\n
      main<\/span>.room<\/span> {\n<\/span><\/span>    background-image<\/span>: url<\/span>(.\/backgrounds\/pexels-pixabay-271816<\/span>.jpg);\n<\/span><\/mark>    background-size<\/span>: cover;\n<\/span><\/span>    background-position<\/span>: center;\n<\/span><\/span>    color<\/span>: white;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Effetto Vetro Base<\/h2>\n\n\n\n
      Se il nostro elemento di vetro fosse perfettamente liscio e trasparente la luce e quindi quello che c’\u00e8 dietro si vedrebbe senza interferenza ma cosa succede se il vetro \u00e8 poroso? Come possiamo renderlo con il CSS?<\/p>\n\n\n\n
      La base dell’effetto vetro \u00e8 senza dubbio la propriet\u00e0 backdrop-filter<\/code> che ci permette di usare diverse funzioni per alterare i pixel che “attraversano il nostro elemento”… proprio come i fotoni con il vetro! Quale migliore funzione se non il classico blur<\/code> per sfocare lo sfondo?<\/p>\n\n\n
      .glass<\/span> {\n    background-color<\/span>: rgba<\/span>(255<\/span>, 255<\/span>, 255<\/span>, 0.2<\/span>);\n    backdrop-filter<\/span>: blur<\/span>(0.2rem<\/span>);\n    border-radius<\/span>: 1rem<\/span>;\n    padding<\/span>: 1rem<\/span>;\n    color<\/span>: white;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      L’effetto blur \u00e8 normalmente espresso in px ma in questo esercizio sfrutteremo l’unit\u00e0 rem per ragionare in termini di valori in proporzione tra loro piuttosto che pixel in quantit\u00e0 fisse.<\/p>\n\n\n\n
      Oltre al backdrop-filter<\/code> che definisce quanto l’immagine dietro verr\u00e0 sfocata (simulando la rifrazione della luce nel vetro) possiamo giocare con il colore del vetro background-color<\/code> ed in questo caso opteremo sempre per un bianco ed usando la funzione rgba()<\/code> specificheremo un valore tra 0.0<\/code> e 1.0<\/code> dove 0.0<\/code> \u00e8 totalmente trasparente<\/strong> e 1.0<\/code> \u00e8 un materiale opaco bianco<\/strong> (quindi sicuramente non vetro).<\/p>\n\n\n\n
      \"Simulazione<\/figure>
      \n
      Vediamo il risultato di questo effetto vetro base dove possiamo controllare la sfocatura, il colore e l’opacit\u00e0! In questo screenshot vediamo blur(0.2rem)<\/code> e rgba(255, 255, 255, 0.2)<\/code><\/p>\n<\/div><\/div>\n\n\n\n
      A questo livello possiamo quindi giocare con la scelta di immagini di sfondo ben selezionate, il colore del font e della base e la sfocatura del nostro vetro: complimenti avete sbloccato una nuova abilit\u00e0 per i vostri personali design e le vostre interfacce futuristiche!<\/p>\n\n\n\n
      Il bordo del vetro<\/h2>\n\n\n\n
      Se osserviamo un vero vetro vedremo che sui bordi tende ad essere pi\u00f9 opaco (meno trasparente) ed in alcuni casi pu\u00f2 essere anche pi\u00f9 luminoso: la luce dello sfondo non ci arriva diretta ma rifratta dal vetro stesso e, poich\u00e9 il vetro non \u00e8 mai perfettamente puro, perturbata maggiormente della superficie a noi perpendicolare.<\/p>\n\n\n\n
      Questa caratteristica pu\u00f2 essere riprodotta dalla propriet\u00e0 border<\/code> e controllata da spessore, colore e opacit\u00e0:<\/p>\n\n\n
      .with-border<\/span> {\n<\/span><\/span>    --border-width<\/span>: 0.1rem<\/span>;\n<\/span><\/mark>    --border-color<\/span>: 255<\/span>, 255<\/span>, 255<\/span>;\n<\/span><\/mark>    --border-opacity<\/span>: 0.1<\/span>;\n<\/span><\/mark>    border<\/span>: var<\/span>(--border-width) solid rgba<\/span>(var(--border-color), var<\/span>(--border-opacity));\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Approfittiamo dell’occasione per specificare i nostri parametri come variabili in modo da poter cambiare i parametri “fisici” del vetro invece di manipolare e cambiare continuamente l’implementazione CSS. \u00c8 un modo per imporsi maggiore chiarezza mentale se volete \u262f\ufe0f<\/p>\n\n\n\n
      \n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n<\/figure>\n\n\n\n
      Abbiamo ora l’abilit\u00e0 di rendere l’effetto del bordo e questo ci permette di fare facilmente un upgrade al nostro design specificando bordi differenti ad ogni lato ed ottenendo una direzione alla luce. Se ad esempio immaginiamo che la luce provenga da in basso a destra e si rifletta nei lati opposti del vetro potremo rendere questo effetto con 4 differenti opacitit\u00e0:<\/p>\n\n\n
       .with-border-and-reflection<\/span> {\n    --border-width<\/span>: 0.1rem<\/span>;\n    --border-color<\/span>: 255<\/span>, 255<\/span>, 255<\/span>;\n    \n    --border-opacity-top<\/span>: 0.7<\/span>;\n    --border-opacity-right<\/span>: 0.7<\/span>;\n    --border-opacity-bottom<\/span>: 0.3<\/span>;\n    --border-opacity-left<\/span>: 0.2<\/span>;\n\n    border-top<\/span>: var<\/span>(--border-width) solid rgba<\/span>(var(--border-color), var<\/span>(--border-opacity-top));\n    border-right<\/span>: var<\/span>(--border-width) solid rgba<\/span>(var(--border-color), var<\/span>(--border-opacity-right));\n    border-bottom<\/span>: var<\/span>(--border-width) solid rgba<\/span>(var(--border-color), var<\/span>(--border-opacity-bottom));\n    border-left<\/span>: var<\/span>(--border-width) solid rgba<\/span>(var(--border-color), var<\/span>(--border-opacity-left));\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      \"\"<\/figure>\n\n\n\n
      Ma perch\u00e9 fermarsi qui? E se provassimo a simulare diversi materiali giocando con altre fantastiche propriet\u00e0 del CSS moderno?<\/p>\n\n\n\n
      Creiamo la nostra collezioni di effetti vetro!<\/h2>\n\n\n\n
      Vetro ondulato<\/h3>\n\n\n\n
      Per realizzare un effetto che dia l’impressione di un vetro ondulato dobbiamo ricorrere ad una propriet\u00e0 potente ma non cos\u00ec conosciuta: background-image<\/code> viene infatti utilizzata il pi\u00f9 delle volte con dei file grazie alla funzione url()<\/code> ma in realt\u00e0 il vero potere viene dall’uso di gradienti ed in questo caso per ottenere il nostro effetto sfrutteremo proprio questa capacit\u00e0 di “compositing” del CSS!<\/p>\n\n\n\n
      Il pattern di un’onda si pu\u00f2 ottenere in tanti modi e qui entra in gioco la vostra creativit\u00e0 unita alla capacit\u00e0 (che va allenata) di tradurre idee in codice. Un modo per farlo \u00e8 con un gradiente lineare che parte da 0.0 e torna a 0.0 passando per 1.0 e -1.0… vi ricorda qualcosa?<\/p>\n\n\n\n
      \"\"<\/figure>
      \n
      Questa volta definiamo base, minimo e massimo nelle variabili CSS e ricordiamoci di specificare la direzione in angoli (0deg<\/code> \u00e8 in verticale) e la in base a questa dobbiamo “schiacciare” il nostro background-size sull’asse corrispettivo (in questo caso la Y):<\/p>\n<\/div><\/div>\n\n\n
      .waved<\/span> {\n    background-image<\/span>: linear-gradient<\/span>(0deg<\/span>, var(--base), var<\/span>(--maximum), var<\/span>(--base), var<\/span>(--minimum), var<\/span>(--base));\n    background-size<\/span>: 100%<\/span> 10%<\/span>;\n    --base<\/span>: #fff3<\/span>;\n    --minimum<\/span>: #fff0<\/span>;\n    --maximum<\/span>: #fff6<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Vetro con pattern<\/h2>\n\n\n\n
      Abbiamo visto come usare background-image per un effetto che si ripete in orizzontale o verticale come l’ondulato, ma cosa succede se si ripetesse in entrambe le direzioni?<\/p>\n\n\n
      .pattern-brushed<\/span> {\n    background-image<\/span>: linear-gradient<\/span>(45deg<\/span>, #fff0, #fff3, #fff0);\n    background-size<\/span>: 10%<\/span> 10%<\/span>;\n}\n\n.pattern-grid<\/span> {\n    background-image<\/span>: linear-gradient<\/span>(0deg<\/span>, #fff3, #fff0 0.1rem<\/span>), linear-gradient<\/span>(90deg<\/span>, #fff3, #fff0 0.1rem<\/span>);\n    background-size<\/span>: 5%<\/span> 5%<\/span>;\n}\n\n.pattern-triangles<\/span> {\n    background-image<\/span>: linear-gradient<\/span>(153deg<\/span>, #fff3 0.2rem<\/span>, #fff0 0.1rem<\/span>);\n    background-size<\/span>: 5%<\/span> 5%<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\"Glassmorphism\n\t\t\t\t<\/picture>\n\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t.pattern-triangles\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\"Glassmorphism\n\t\t\t\t<\/picture>\n\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t.pattern-grid\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\"Glassmorphism\n\t\t\t\t<\/picture>\n\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t.pattern-brushed\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\"Glassmorphism\n\t\t\t\t\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\"Glassmorphism\n\t\t\t\t\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t\t\"Glassmorphism\n\t\t\t\t\t\t\t\t
      <\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
      <\/div>\n\t\t\t\t\t
      <\/div>\n\t\t\t\t<\/div>\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t