Card glass effect
Mon Nov 20 2023 01:24:56 GMT+0000 (Coordinated Universal Time)
Saved by
@themehoney
.container {
position: relative;
font-family: sans-serif;
}
.container::before, .container::after {
content: "";
background-color: #fab5704c;
position: absolute;
}
.container::before {
border-radius: 50%;
width: 6rem;
height: 6rem;
top: 30%;
right: 7%;
}
.container::after {
content: "";
position: absolute;
height: 3rem;
top: 8%;
right: 5%;
border: 1px solid;
}
.container .box {
width: 11.875em;
height: 15.875em;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.074);
border: 1px solid rgba(255, 255, 255, 0.222);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: .7rem;
transition: all ease .3s;
}
.container .box {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.container .box .title {
font-size: 2rem;
font-weight: 500;
letter-spacing: .1em
}
.container .box div strong {
display: block;
margin-bottom: .5rem;
}
.container .box div p {
margin: 0;
font-size: .9em;
font-weight: 300;
letter-spacing: .1em;
}
.container .box div span {
font-size: .7rem;
font-weight: 300;
}
.container .box div span:nth-child(3) {
font-weight: 500;
margin-right: .2rem;
}
.container .box:hover {
box-shadow: 0px 0px 20px 1px #ffbb763f;
border: 1px solid rgba(255, 255, 255, 0.454);
}
content_copyCOPY
https://uiverse.io/
Comments