- What is this?
- A stylesheet that gives stylestage.dev a new, experimental look
- ~ July 2020
- Languages used
For those not familiar, Zen Garden was a website prompting people to submit their own stylesheet for the site. I'm saying "was" because even though the site is still live, the project stopped taking submissions in 2013. The goal of the project was to show people how powerful CSS can be and how different websites can look by simply changing the CSS, and not the markup.
Now Stephanie has picked up the torch and people have recreated the magic of the original project.
Here's a GIF of how the website looks with my stylesheet applied.
I wanted to give the sections of the site an "OS-look", hence the name "StageOS". Without ever touching the markup I created window frames using CSS gradients, added an animated border in the style of a barber pole and fixed position of the anchor menu.
One of my favorite features however is the use of
linear-gradient() in the
border-image-source property for the blockquote in the first section. It's an interesting property and use case, of which I believe few people are aware of.