DEV Community

loading...
Cover image for Glassmorphism List UI Design

Glassmorphism List UI Design

bilalcapripio profile image Bilal M Rizwaan ・1 min read

Glassmorphism List UI Design With 3D Button Using CSS | Glass morphism | HTML CSS

-----Click on this link and get free Source code-------
https://codepen.io/Bilal1909/pen/PoGWvBV?editors=1100

Discussion (4)

pic
Editor guide
Collapse
stackfindover profile image
Stackfindover

Wow Glassmorphism is awesome UI its should be trand in 2021, what do you think?
Neumorphism Cards Using Html & CSS with Hover Effects | CSS UI Design Tutorial 2021

Collapse
billernet profile image
Bill💡

I disagree. I have concerns about the accessibility of Glassmorphism and Neumorphism. It is definitely possible to build accessible pages incorporating these styles, but even in the examples I've seen people post simple things like having a good contrast between fore and background have been ignored.

Collapse
jameslivesey profile image
James Livesey • Edited

I agree ─ there's waaay too many examples of Glassmorphism (I'm looking at you, Dribbble users...) which just won't be accessible. Thankfully, many of the examples on the Dribbble Glassmorphism page do have a good contrast ratio.

imo, it really depends on the particular 'levels' of Glassmorphism being employed. So long as designers choose a sufficient value for the opacity of the panels and the blurriness, the contrast level can be sufficient enough to be accessible. Having played with glassmorphism.com, it seems that the higher the opacity (or 'transparency' as they've labelled on the site), the better contrast there is. I also find that the more blurry the panel is, the better the signal-to-noise ratio when it comes to distinguishing background and foreground text and content.

My favourite values on that site are blur value: 10.0, transparency: 0.80 - 0.90 (depending on what's being conveyed)

I think that one of the most notable examples of Glassmorphism is Microsoft's Fluent Design that's already incorporated into Windows 10 ─ their 'acrylic' effect is really nice to look at, but critically also accessible (which is kinda important for one of the most popular OSes out there...).

Thank goodness the trend of Neumorphism is over, though! Accessibility nightmare...

Collapse
stackfindover profile image
Stackfindover • Edited

its maybe right, people mostly post simple things. what do you think what's UI trend in 2021?