time.gov redesign

time.gov just recently updated their web page, and it's really neat. Personally, I really like the design, and this little design element on the non-DST changing timezones really caught my eye:

So I thought I would try my hand at rebuilding it using only css. It turns out that it is pretty easy to do using repeating-linear-gradients

CSS!

The CSS itself is pretty straightforward. I used a ::before selector to add the initial striped tab. The only weird thing I ran into was that linear gradients are not really intended for creating nice even small stripes. I ended up with this gradient that works well:

background-image: repeating-linear-gradient(
  -45deg,
  #fff,
  #fff .5px,
  transparent 1px,
  transparent 2.5px,
  #fff 3px,
  #fff 4px  
);

Originally I started my gradient with the first half is white and the second half is transparent, but this causes a hard edge and makes the lines look jagged and uneven. Maybe that's a design decision you can make if you want your users to feel a little uneasy! To make it look better I have the first 25% be white, the next 50% be transparent and then the final 25% be white. I also gave a half pixel space on each transition to actually do a gradient. In my mind this is crazy, but on a hi-dpi screen it makes a visual difference.

How this compares to time.gov

The developers/designers on time.gov went with a background-image to do the stripes. The image itself is only the white lines with transparent between them. This lets them use a set different background colors for each timezone. It works well and I don't see a reason to change this, but I would make the image be tile-able so that it repeats nicely when needed.

Here are a few more examples:

You can view the css and remix/play around with it on glitch