DEV Community

Cover image for Exploring the Glassmorphism Hype
neoan
neoan

Posted on

Exploring the Glassmorphism Hype

Just hover the buttons!

I have to be honest: most hypes come and go. The frosted glass look that currently seems to be the "must have" will fade as well. Additionally, whether it is the accessibility and the contrast-issues or the --- never mind, I just hovered the button and I love it!

I imagine I am not the only one with that experience. I decided to create a little CSS template so you can hover the buttons as well. Joke aside, the template is built on Gaudiamus CSS and therefore allows very easy adoption to whatever corporate identity you need to adhere to. If you like it, don't forget to leave me a star on GitHub:

GitHub logo gaudiamus-css / glass

template / demo of a gaudiamus design

Glass

screen

Very simple gaudiamus example to build on top of.

live demo

screen

Use it:

  1. fork this repository
  2. clone & enjoy

Requirements

  • SASS (dartSass, as libSASS is deprecated and does not support some used features)

First steps

The file style/_variables.scss is a good starting point. It includes common Gaudiamus variables and controls values like colors, breakpoints etc.

Files

_buttons.scss

Handles button & icon behavior

_card.scss

Handles card glassmorphism

_effects.scss

Masking, clipping & scrollbar

_form

HTML form elements (input, textarea, select, checkbox)

_menu

Navbar & mobile menu

_variables

SCSS-variables

style.scss

Main stylesheet & font setup

components/toggle.js

VanillaJS toggle e.g. for menu behavior. Should work nicely with all frameworks.




Top comments (0)