Where can i find tutorials about advanced borders and box-shadows in css?
I discovered shape of css but cant explanation this:
#space-invader{
box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
}<div id="space-invader"></div>Can anyone explain me how it works? Are this for all browsers?
Thanx.
You can have multiple box shadows on an element. It's possible to add a lot, as in the example
The values in the first two positions pull the shadows about in relation to their parent object. They can be thought of as co-ordinates, with each box shadow being a block and the values in the first two positions being it's co-ordinates
The second pair of values, in positions three and four define the blur of the shadow and it's size. By setting these both to 0 the shadow has a flat edge and is the same size as it's parent element. As the parent element is a 1em block this means that the shadow creates a 1em box
The em value of 1 set on the parent element starts by taking the default font size of 16px in most browsers and creates a box 16px square.
The shadows are then all 16px squares, with no blur, offset by an integer number of ems, creating the blocky result.
Let's take a look at an edited example. We can see here immediately that changing the font size on the parent element changes the size of the blocks as em works with font size. We can also see that we can set the colour of squares by changing the individual box shadows.
Another box has been made blurry by changing the blur radius of the box shadow and another made much bigger, again, ems were used to demonstrate the inheritance of size with this unit.
Finally a block is moved to the wrong co-ordinate
#space-invader{
box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 1em 0 #5f5, /* BLURRED */
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
12em -1em 0 0 red, /* MOVED OUT OF POSITION */
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 blue, /* COLOURED */
-4em 1em 0 0 red,
4em 1em 0 0 blue,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 2em #666, /* MADE LARGER */
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;
background: red;
width: 1em;
height: 1em;
overflow: hidden;
font-size: 12px;
margin: 100px;
}<div id="space-invader"></div>Here's some more about ems: http://www.impressivewebs.com/understanding-em-units-css/ https://css-tricks.com/why-ems/
And some more about box shadow: https://css-tricks.com/almanac/properties/b/box-shadow/
One final note: this code is pretty stable in browsers. Box Shadow (even without prefixes) is very well supported and ems have been around since the year dot, they're even prefered over pixels in IE6