Shiny Glass Hover Effect (Glassmorphism)

 By DEV Community - 2021-01-25

Description

Today let's work with the backdrop-filter property and a skewed ::before element, to create a nice sh...

Summary

  • Setting up the container The most important thing about the container is the grid layout configuration, which consist implicitly of one single row - as no row config is given.
  • So whenever the button size changed, the box-shadow is scaled along with it.
  • before pseudo-element which has a slightly stronger white as background color and is skewed by 45 degrees.

 

Topics

  1. Backend (0.16)
  2. Machine_Learning (0.03)

Similar Articles

Using Chrome DevTools to debug CSS Grid

By LogRocket Blog - 2021-01-04

Using Chrome DevTools and CSS Grid, learn how to discover grids in a page, inspect page layout, and debug common layout issues.

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...

Responsive Website using CSS Grid

By DEV Community - 2020-12-22

This blog post describes one of the websites I have built using a powerful tool for building responsi... Tagged with webdev, css, html, codenewbie.

Boop!

By joshwcomeau - 2020-12-03

An in-depth tutorial that teaches how to create one of the most adorable interactions I've ever created. We'll learn how to use React components and hooks to abstract behaviours, and see how to design ...