Cory's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

🖥🎄 CSS Holiday Snippet: Winter Snow

Here's two lines of code to add some nice subtle snow along with a nice snowbank at the bottom:




body::before{
content: " "; 
width: 100vw; 
height: 100vh; 
display: block; 
position: fixed; 
background-image: url('https://media.giphy.com/media/JTiov5UXnJyKI/source.gif'); 
background-size: cover; 
mix-blend-mode: screen; 
pointer-events: none; 
z-index: 1; 
filter: blur(3px);
}
body::after{
content: " ";
width: 100vw;
display: block;
position: fixed;
height: 10vw;
background-image: url('https://tinyimg.io/i/Cnq9jSm.png');
background-size: cover;
bottom: -50px;
z-index: 0;
pointer-events: none;
}

If you're using other CSS that interacts with body::before and body::after, you might have to change body to html. Happy holidays!


11 Kudos

—

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

Fluid Dynamic

 Fluid Dynamic's profile picture

OMG I love this


Report Comment

HELLY STILETTO, High Priestess of Coffee and Wine

 HELLY STILETTO, High Prie...'s profile picture

Thanks! I put this in About Me? It didn't seem to work?


Report Comment



these have to go in between style tags like the ones An puts on the advent calender :)

by Fluid Dynamic; ; Report

Thanks! I'll give it a try!

by HELLY STILETTO, High Priestess of Coffee and Wine; ; Report

Kathleen

 Kathleen's profile picture

These are so classy, and don’t involve any restructure. Love.


Report Comment