Airhorn


made by psimyn

The right way to disable CSS animations

Sometimes I want a way to disable all CSS animations on a page. This is useful for end-to-end testing, automatic screenshots, or reducing motion sickness risk. This recent CSS Tricks post suggests disabling animations & transitions while resizing, to reduce needless browser work. This is an excellent idea! Here is the usual way of disabling animations:

Continue reading “The right way to disable CSS animations”

CSS snippet for better mobile screenshots

A useful tip when adding screenshots to posts or talks is to put them “inside” a device. This gives the screenshot some context.

Even though this screenshot already contains Android top & bottom bars, with the added outline it’s immediately obvious it’s from a phone.

The Economist on mobile is mostly sticky bullshit

The Economist on mobile is mostly sticky bullshit

To add the outline to images I use a simple CSS border:

.phone-border {
  border: #111 solid;
  border-radius: 1rem;
  border-width: 2rem 1rem 3rem 1rem;
}

To take this further you can also make them responsive! So we see phone screenshots on phones, and a fake laptop screen outline on big/wide screens. This assumes you are using responsive images so you get desktop aspect ratio on bigger screens.

@media (min-width: 800px and min-aspect-ratio: 16/9) {
  .phone-border {
    border-color: #ccc;
    border-width: 1rem;
  }
}