An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Frost Effect in CSS
Hey fellow creators
How to create a glassomophorism (frost effect) in CSS?
If you prefer to watch the video version, it's right here :
1. The HTML structure.
Create a button inside two divs:
<div class="home"> <div class="container"> <button>Welcome</button> </div></div>
2. Style your button.
Add an image to the background of the page:
.home { background: url("https://images.unsplash.com/photo-1631515998058-69359a50da68?ixlib"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100vh; padding-top: 125px;}
Now style the container that will look frosted:
.container { margin: auto; width: 450px; height: 275px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4); border-radius: 5px; position: relative; z-index: 1; background: inherit; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column;}
(The z-index will create a new stacking context).
You do inherit the background of the page at the same position (if you comment it, youll see that otherwise you inherit the background as a whole inside of that container, which isnt what we want!).
Next, style the button:
.container button { padding: 10px 15px; border-radius: 5px; border: none; cursor: pointer; font-family: Lora; background: #b6604f; color: #f1f1f1; font-size: 27px; padding: 15px 30px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800;}
3. Add the frost effect!
You need to use the pseudo-element before in order to create that effect:
.container::before { content: ""; position: absolute; background: inherit; z-index: -1; inset: 0; filter: blur(10px); margin: -20px;}
The z-index will also create a new stacking context, but since the pseudo-element before is kind of a child of the container, it will always stay at the top of the container.
Bravo, you are done!
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
Original Link: https://dev.to/ziratsu/frost-effect-in-css-5f21
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To