Pure CSS: This 3D art gallery is made up of HTML and CSS only

The outstaffing front-end developer Ben Evans has built a 3D gallery for his CSS art, which is operated like a first-person shooter and itself consists only of CSS and HTML. Javascript is not used.

Ben Evans is a tinkerer who has already created works of art such as a style life, a child portrait and a sunset scene from pure CSS. In order to present his CSS art appropriately, he has now built an art gallery around it.

Art gallery like from the 3D game

In a three-dimensional space, the viewer rotates around his own axis with the mouse or fingertip and sees the individual exhibits. A click on the corresponding exhibit leads to the codepen of the respective exhibit. While building the 3D gallery, Evans looked over his shoulder and documented the process in a short video on YouTube.

Evans only used HTML and CSS for the gallery. He didn’t even use Javascript for the animations. To what extent this is an advantage remains questionable. After all, a good Javascript library would have produced smoother animations. So the use is a bit abrupt.

But, so be it, Evans just wanted to show what is possible without Javascript. Those who wish can purchase Evans CSS art as prints from the gallery. Little gimmicks like a light switch that bathes the room in twilight or illuminates it again should make the visit more interesting. Evans claims to have hidden some so-called Easter eggs in his installation. Just click through.

Ben Evans wanted to show his CSS art in a suitable setting. (Screenshot: t3n)

The pictures in the gallery were all created from pure CSS. For the spatial representation in the virtual gallery, however, Evans used images of the exhibits in order – as he says – to avoid the viewer’s computers “melting”.

Evans shows these CSS artworks in his gallery.

Pure CSS: An Evening in Southwold. (Screenshot: t3n)

Pure CSS: Isla. (Screenshot: t3n)

Still Life – Water and Lemons

Still life. (Screenshot: t3n)

Ben Evans is one of the most active CSS artists on the net, along with frontend developer Diana Adrianne Smith, whose work we have presented to you in this post.

Fittingly: developer builds Tesla’s Cybertruck in CSS

You might be interested in that too

Ready to see us in action:

More To Explore

Enable registration in settings - general
Have any project in mind?

Contact us: