Every now and then I get a "CSS phase". The latest one started when I discovered CSSBattle. This website has daily challenges where you need to reproduce an image with CSS with the least amount of characters. I am horrible, extremely verbose, but I must say I got obsessed.
One of my favorite things is looking at other people's solutions, and this was how I discovered that my other fellow css-battlers uses box-shadow a lot there, and then I got super curiours about it. They basically use this property to replicate one retangle forever and ever. I'll show how.
The box-shadow property
There are lots of arrangements for this property, according to the documentation. But the one we use here is top left color. So, for example:
(CSSBattle daily target for 16/11/2024)
In this image we see only one div; the other ones are shadows. So, the html will be:
<html>
<body>
<div></div>
</body>
</html>The CSS will be:
* {
background: #6592CF;
position: absolute;
}
div {
top: 52px;
left: 52px;
width: 70px;
height: 30px;
background: #EEB850;
box-shadow:
0 75px #243D83, 0 150px #EEB850,
105px 0 #243D83, 210px 0 #EEB850,
105px 75px #EEB850, 210px 75px #243D83,
105px 150px #243D83, 210px 150px #EEB850;
}Note that the top and left properties are in px, and the distances are relative to the first one.
Maybe I'm the only one, but I think that this is very interesting. I'll continue my studies in CSS and I'll let you if I find other cool things.