Good evening Folks, Today's topic is quite familiar to each one of you. It's called Frosted Glass Effect. In image editors we use this trend to blur, Contrast, and saturate a picture. The same effect is used on the web with the filters already applied in them. As browsers begin to incorporate filters as part of the web platform, we can begin breaking down complex visual effects into their component parts, and implementing them on the web. This article will examine one such effect, frosted glass, and how CSS filters provide a cleaner, more flexible solution than static images.
Frosted Glass with Cards
The frosted glass effect has been kicking around the internet for a while. The idea behind the effect is relatively simple: just blur and lighten the area behind overlaid content. The content gains higher contrast with its background, but you still maintain a rough idea of what’s going on behind it. Here is an example which shows how to incorporate this Effect in Web.
Example
Css
@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
* {
margin: 0;
padding: 0;
}
body {
background: url("https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
no-repeat center center;
background-size: cover;
display: grid;
font-family: "Inconsolata", monospace;
min-height: 100vh;
place-items: center;
}
.holder {
position: relative;
&:before,
&:after {
animation: orbit 5s linear infinite;
border-radius: 50%;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
content: "";
height: 150px;
position: absolute;
width: 150px;
}
&:before {
background: #ffe897;
background: -moz-radial-gradient(top right, #ffe897, #f98a05);
background: radial-gradient(to bottom left, #ffe897, #f98a05);
background: -webkit-radial-gradient(top right, #ffe897, #f98a05);
}
&:after {
animation-delay: -2.5s;
background: #e0e793;
background: -moz-radial-gradient(bottom right, #e0e793, #6dd0f1);
background: radial-gradient(to top left, #e0e793, #6dd0f1);
background: -webkit-radial-gradient(bottom right, #e0e793, #6dd0f1);
right: 0;
top: 0;
z-index: -1;
}
}
.card {
border: 1px solid #fff;
border-radius: 15px;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
font-size: 2rem;
height: 220px;
overflow: hidden;
position: relative;
width: 370px;
&:before {
background-color: rgba(255,255,255,0.3);
backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
-webkit-backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
&__text {
color: #6f7886;
margin-left: 30px;
margin-top: 100px;
position: relative;
z-index: 2;
}
svg {
bottom: 30px;
position: absolute;
right: 30px;
}
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}
That was an interesting topic, Isn't it?.
You must be logged in to post a comment.