It’s appropriate for winter: my CPU spins and my laptop is warm and cozy. :D
(but seriously, impressive! I’m not a web person, but I had no idea you could do so much with bare CSS)
See https://christine.website/css/snow.css. In there I create a class called snow with both of the background images (random dots i colored white based off of ideas from a stackoverflow answer). It creates a 30 second infinite loop of linear animation. Then for the keyframes I have the snow move down and to the right.
I think it’s because of the blur and animation frames colliding in weird ways. I think I’m gonna roll back the frosted glass effect, but it was cool that it was so easy to implement (ignore the unrelated commit i accidentally merged into it)
In my opinion, using SVG is a cheat. It has the same capabilities of <canvas> basically.
IMO @cadey cheated here too because they used an image. So now the browser must understand image data. Better is if they 1. render a circle (via border-radius) 2. animate the circle 3. generate the markup to create many circles or similar.
SCSS would probably be good for this, since they can pre-generate random positions.
that’s referring to the @keyframes snow at the bottom of the css file, which gives background position items and then the css engine interpolates other frames in between.
Considering adding this to my own site. It’s currently simple black text on a white background, so the snow doesn’t show up, but the following worked really nicely…
Set body { background-color: #111; }
Set body { filter: invert(100%) } to invert all the text colors
Set body { font-weight: bold; } since my choice of font looks pretty bad on a black background, and bolding helps a lot.
And then someone gave me the idea to make it dynamic based on if it’s actually snowing in my area so I might do…
Keep two CSS files on the server somewhere, style_nosnow.css and style_snow.css.
Set up a script to run on my server that runs every x minutes/hours/whatever to poll a weather API (could use DarkSky since their API is free for less than 1000 requests/day).
Based on the polled weather condition and if it’s snowing, copy the relevant CSS file to /style.css in my webroot so the site is “dynamically” updated, without having to poll the API from the site itself, and avoiding any javascript to the site as well.
This nicely avoids:
Client-side weather API requests because putting an API key right in my page would be a bad idea.
If a ton of people visit my site, I could run over the 1000 requests limit if I’m polling with each site load server-side somehow.
Having to use any client-side javascript at all.
Having to use some kind of dynamic webserver, can continue just serving up static files.
Ah, brings me back to the days of MySpace,
<marquee/>,<blink/>, and tiny pixel art gifs…I’m getting on MySpace, and I won’t ever leave…
It’s appropriate for winter: my CPU spins and my laptop is warm and cozy. :D (but seriously, impressive! I’m not a web person, but I had no idea you could do so much with bare CSS)
It’s a really hacky effect too.
See https://christine.website/css/snow.css. In there I create a class called snow with both of the background images (random dots i colored white based off of ideas from a stackoverflow answer). It creates a 30 second infinite loop of linear animation. Then for the keyframes I have the snow move down and to the right.
Any idea why it’s so CPU intensive? It’s been a while, but I vaguely recall CSS animation generally outperforming JS animation.
I think it’s because of the blur and animation frames colliding in weird ways. I think I’m gonna roll back the frosted glass effect, but it was cool that it was so easy to implement (ignore the unrelated commit i accidentally merged into it)
Could this have also been done using SVG or blur?
It does use blur!
Err, I meant using Blur on something like a border or a background, as to avoid the
background-imageblob.In my opinion, using SVG is a cheat. It has the same capabilities of
<canvas>basically.IMO @cadey cheated here too because they used an image. So now the browser must understand image data. Better is if they 1. render a circle (via border-radius) 2. animate the circle 3. generate the markup to create many circles or similar.
SCSS would probably be good for this, since they can pre-generate random positions.
And I thought I’d come across most date formats by now… :/
(but the snow is nice :)
I’m doing my part in adding date formats to people’s test suites, one confusion at a time.
That’s cold.
Wait wait … snow is a CSS3 animation effect?!
that’s referring to the
@keyframes snowat the bottom of the css file, which gives background position items and then the css engine interpolates other frames in between.all it really does is move a background image.
Considering adding this to my own site. It’s currently simple black text on a white background, so the snow doesn’t show up, but the following worked really nicely…
body { background-color: #111; }body { filter: invert(100%) }to invert all the text colorsbody { font-weight: bold; }since my choice of font looks pretty bad on a black background, and bolding helps a lot.And then someone gave me the idea to make it dynamic based on if it’s actually snowing in my area so I might do…
style_nosnow.cssandstyle_snow.css.xminutes/hours/whatever to poll a weather API (could use DarkSky since their API is free for less than 1000 requests/day)./style.cssin my webroot so the site is “dynamically” updated, without having to poll the API from the site itself, and avoiding any javascript to the site as well.This nicely avoids:
I was actually considering doing this too with other weather too like rain, thunder, lightning and clouds.
That “Share on Mastodon” button makes my heart smile
This is fun, I love this stuff. Would see this kind of thing back when web design was more whimsical.
Oh, that’s lovely. I really like the look and feel of your website! Could you describe a little what you used to put it together?
It’s based on a few things:
It is a very boring Go app.
Cheers!