Quickies

“I … ah … The company’s planning a mid-year Christmas hamper for all staff with each division head responsible for sorting something from their area. The Design people have created tee-shirts with all the company logos from the past ten years, the PR people have sourced a picnic blanket with the current company logo, Finance have organized an elephant money box with the company logo on it, and I’m just trying to think of something that would really complement it.”

“Hmmm … a box of matches and a tin of petrol?” I suggest.

BOFH still cracks me up even in 2023.

CSS PNG Animation using keyframes

Curious how I did the animated “gifs” on the Sven Bømwøllen > a half-assed review post? Well, wonder no more.

The HTML is a simple div with a class

1
<div class="sven-1"></div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.sven-1 {
	/* display rules and background general rules */
	display: block;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 92px;
	height: 74px;

	/* specific rules */
	background-image: url(//i.andrei.xyz/uploads/2023/sven-bomwollen/sven-hump-1.png);
	animation: sven1 steps(6) 0.6s infinite;
}
@keyframes sven1  {0% {background position: 0 0;}100% {background-position: 0 -448px;}}

The important things here are:

  • div’s width and height: how big the frame is?
  • background-image: the image that we’ll use for the animation
  • steps(6): how many steps (frames) does the image have?
  • animation duration: i used 0.6s. Actually it’s 0.1 per frame, so the animation looks very similar to the one in the game.
  • background-position: we start from 0 0 (top left), and we end the animation at 0 -448px, meaning that the end frame will be 448 pixels below the origin. This can be tweaked if you need to alter the animation a bit, but it’s usually the height of the image.

This allowed me to turn this image

into this animation:

FD tribute

FD tribute

Back in 2010, I was working on what ended up to be the biggest fashion website in Romania, fashiondays.ro. Designed by my friend, Andi M., I did a ton of coding for that project over 4 years or so. In order to throw back to those days, I’ve decided to re-paint my site in their original colours for the week to come. :)

RIP Rodriguez

RIP Rodriguez

youtube • video ID: E90_aL870ao

click image to load player

Neil Hilborn - OCD

youtube • video ID: vnKZ4pdSU-s

click image to load player

youtube • video ID: GiZHmwzNAqE

click image to load player

Well I was the first to have spoken
And I said just about all of the things you shouldn’t say
So maybe you loved me, but now, maybe you don’t
And maybe you’ll call me, maybe you won’t, oh.

your money is safe not

your money is safe not

Nintendo Switch Cassette Case Insert

records and me

records and me

operation tidal wave

In war, the people that give the kill orders are never the ones to die.

100 civilians killed and 200 injured

Thank you, America! (/s)

Operation Tidal Wave

youtube • video ID: Hiz9iFlYKX8

click image to load player

non ti lascero mai

pusuke

pusuke

photo of a friend and I

close tools paneltoggle tools panel