Cory's profile picture

Published by

published
updated

Category: Web, HTML, Tech

🖥 CSS Snippet: Live Weather Conditions

Hey everyone! I've got a NEW thing to show y'all. I've really decided to push the boundaries of what I can do with CSS and stuff here on SpaceHey and I think this is a step in the right direction.


The code down below will add an animated overlay to your profile that will reflect the actual weather conditions of whatever US Zip Code you set. For instance, right now in Baltimore, it's a little cloudy, so this is what my tester profile looks like: 



But in Raleigh, NC right now, it's raining, so if I change nothing but the ZIP code, this is now what my tester profile looks like:



So whenever you load up your page, the CSS will check the weather for the ZIP code you set and will reflect with a full-screen animation covering your profile. This works on all browsers and is a relatively easy code. Just change the background: line to reflect your ZIP code to change the one that's listed (19120). 

NOW! This is pretty advanced code, and it uses the OpenWeather API. It doesn't cost any money, but I do have to use my personal web server in order to serve up the image. If you do use this code, I would appreciate a $1/month subscription to my Patreon or at the very least throwing me a few bucks on my CashApp, just to cover the costs of the bandwidth. You don't have to, but I thought I'd throw it out there.

Remember, put all CSS between <style></style> tags and place that code in any of your profile About Me boxes.

html:before {
background: url('https://pacdudegames.com/spacehey/daveroberts.php?zip=19120');
background-size: cover;
background-position: center;
content: "";
display: block;
position: fixed;
height: 100vh;
width: 100vw;
top: auto;
bottom: auto;
left: auto;
right: auto;
filter: blur(5px);
-webkit-filter: blur(5px);
transform: scale(1.1);
z-index: 35;
mix-blend-mode: hard-light;
pointer-events: none;
opacity:.2;
}


30 Kudos

Comments

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