Recurss

Links

• Site
• Submit a new specimen

Recurss is collection of recursive css specimens. These work by styling a page consisting of nothing but nested divs:

<div>
    <div>
        <div>
            ...
        </div>
    </div>
</div>

Some really interesting designs can be created by styling such a simple structure. The stylesheet of the City specimen above for example is only around 10 lines long:

div {
    width: 70px;
    height: 400px;
    background: linear-gradient(#333 20%, #3330);
    margin-left: 400px;
    transform: rotateY(43deg) scale(0.99);
    transform-style: preserve-3d;
    border-style: solid;
    border-image: linear-gradient(#ff73d922, transparent) 1;
    border-bottom: none;
}

Other designs can be more like spirograph drawings:

or WordArt:

My first brush with recursive css was writing the Blot’re 404 page. I really like the technique because its limitations make you to think about styling in a different way. Just mucking around with values and properties to see what happens is also just a lot of fun (it’s also a good way to stress test your browser).

Anyone can submit new specimens to Recurss. Just follow these instructions to get started. I look forward to seeing the designs that people create.