CREATING GLASSMORPHIC ELEMENTS IN CSS

                                 

NEW TREND OF 2021

Glassmorphism is a new trend which is getting more popular on services like Dribbble and Behance.

2020 has been all about problems, but the silver lining in 2020 is all about innovative designs like typography, 3D realism, metallic textures, geometric designs, and liquid patterns.

In 2020, we saw neuromorphic  design, but it is criticized by many, but then we saw -

 Michał Malewicz, the creator of the neumorphism style, wrote about something fresh and good-looking — Glassmorphism style.

The characteristics features of Glassmorphism are :-

1) Transparency (frosted glass)

2)Vivid or pastel colors

3) Light border

Glassmorphism — The CSS Way

Glassmorphism is pretty easy to achieve for front-end developers. There is one main CSS property that we can use: backdrop-filter. This property allows you to apply multiple effects such as blur, sepia, and greyscale to the area behind your component. Since it applies to everything behind the component, to see the effect, you must make this element at least partially transparent.

To create the Glassmorphism effect, you should use backdrop-filter: blur().

<div class="basic">
  <div class="blur"></div>
</div>.basic {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.4);
  position: relative;
}
.blur {
  position: absolute;
  bottom: 25px;
  right: 162px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(5px);
}

Basic component

The image behind has straight background: rgba(255,255,255,0.4). The element above is a copy of the first one but with an additional backdrop-filter: blur(10px) property.

This is the simplest example of a new trend. But we can go even further. You can add, as recommended by Michał Malewicz, a border radius, white border, and a little bit more blur.

The last thing you can try is to add a 1px inner border with some transparency to your shape. It simulates the glass edge and can make the shape stand out more from the background.

<div class="basic">
  <div class="blur"></div>
</div>.basic {
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.4);
  position: relative;
}
.blur {
  position: absolute;
  bottom: 25px;
  right: 162px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

Rounded borders and white border

Glassmorphism 2021

I hope that Glassmorphism will be trendy in 2021. I would like to see real apps built in this style or have a chance to build them on my own.

Play with my hero image on codepen.

Browser Compatibility

According to Can I Use, the property backdrop-filter is fully supported by Chrome, Safari, iOS, Android Browser, and Edge. Firefox is not supported by default but can be enabled.

ABOUT US :

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences.

KEYWORDS :

CSS media queries

design and development

SOURCE : 

https://medium.com/better-programming/a-short-guide-on-how-to-create-glassmorphic-elements-in-pure-css-4d52f81089ab