I created an account on “CSS Battles”, And I was curious about the answer of the highest score in the first battle," Battle #1 - Pilot Battle #1 - Simply Square" The code was like that :
<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>
Which creates a square that looks like this :
So what does the code mean? and how to learn advanced things like that?
And what search keywords should I use to look these things out in google ?
It is the same as:
img {
box-shadow: 0 0 0 2in #b5e0ba, 0 0 0 5in #5d3a3a;
}
First box-shadow:
0 offset-x
0 offset-y
0 blur-radius
2in spread-radius
color #b5e0ba
Second box-shadow:
0 offset-x
0 offset-y
0 blur-radius
5in spread-radius
color #5d3a3a
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The in unit is inches.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
The use of + is to avoid having to use a string.
<img style="box-shadow:0 0 0 2in #b5e0ba,0 0 0 5in #5d3a3a">
You can search for css golf code to read more.
Example article
Just to be clear, golf code can be interesting but it isn’t very useful in the real world.