css filmstrip

2022 - what a time to be alive!

I can make a container that looks like a filmstrip with a single CSS class.

Either vertical - yay a demo!

.filmstrip-vertical {
  background-image: linear-gradient(
      to right,
      transparent 20px,
      black 20px,
      black calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    repeating-linear-gradient(#000, #000 20px, #fff 20px, #fff 40px);
  background-repeat: repeat-y;
  box-sizing: border-box;
  border-left: 20px solid black;
  border-right: 20px solid black;
  padding: 20px 40px;
}

Or horizontal - another demo!

.filmstrip-horizontal {
  background-image: linear-gradient(
      to bottom,
      transparent 20px,
      black 20px,
      black calc(100% - 20px),
      transparent calc(100% - 20px)
    ),
    repeating-linear-gradient(90deg, #000, #000 20px, #fff 20px, #fff 40px);
  box-sizing: border-box;
  border-top: 20px solid black;
  border-bottom: 20px solid black;
  padding: 40px 20px;
}

I needed this today.

You may need it tomorrow.

Enjoy CSS.

CSS is freedom.

CSS is life.