Experiment 2: 360° view Skyscraper at night made only with CSS gradients and 3D transforms - No JS or external/ embedded resources (images, data URIs).

Today’s experiment

// Each number will set the luminosity of the respective window 
// to a specific level:
// 0 - Turned off
// 1 - Turned on (intensity of 80%)
// 2 - Half light (intensity of 30%)
// 3 - Half light (intensity of 20%)
// 4 - Half light (intensity of 10%)
building-side-texture(100%,
(4 4 3 2 1 1 2 3 0 0 0 0 3 3 4 4 0 0 0 0 1 1 1 1 2 3 4 4),
(1 1 1 1 0 0 0 0 1 1 1 1 1 1 2 2 0 0 0 0 0 4 3 2 1 1 1 1),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(4 4 3 2 1 1 1 1 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 2 3 4 4),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(1 1 2 3 4 4 3 2 1 1 1 1 1 1 1 1 1 1 1 1 2 3 3 2 3 2 1 1),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(4 4 3 2 1 1 1 1 2 3 4 0 0 0 0 4 4 3 2 2 1 1 1 1 2 3 4 4),
(0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 4 4 4 4),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(1 1 1 1 2 3 3 2 1 1 2 3 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1),
(1 1 2 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 2 1 1),
(0 0 0 0 0 0 0 0 0 0 0 0 3 4 4 4 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 3 2 1 1 1 1 2 3 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 4 3 2 1 1 1 1 2 3 4 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0)
);
  • In Safari, unfortunately, it simply doesn’t work at all, and I’m out of patience and time to debug it for now.
  • I suspect that this issue has something to do with defining gradient backgrounds within animation keyframes. But this isn’t confirmed yet.
  • I didn’t test it with other browsers or devices.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store