Tinkering with using CSS box shadows to create an image with 1 single HTML div element. This idea for what I created comes from a lazyweb request for the famous “Website Under Construction” GIF, but reproduced with just CSS.
It is super easy, just a little tedious, the idea is you can essentially make little “dots” with box-shadows, it is not exactly practical to do things like this, but it is a fun exercise just knowing how to do it.
Single Element HTML
<div class="construction"></div>CSS, well technically SCSS
body { padding: 2em; }
.construction {
animation: work 1s steps(1, start) infinite;
position: relative;
height: 1em;
width: 1em;
margin-bottom: 37em;
margin-left: 17em;
font-size: 7px;
&:before {
@include rotate(45deg);
z-index: -1;
position: absolute;
top: 5em;
left: -12em;
height: 28em;
width: 28em;
content: '';
background-color: #fdd400;
border-radius: 3em;
}
&:after {
content: '';
position: absolute;
left: -17em;
height: 1em;
width: 1em;
margin-left: 17em;
background-color: #000;
box-shadow:
/* static parts */
/* the sign border */
/* row 1 */
1em 0em,
2em 0em,
3em 0em,
/* row 2 */
-1em 1em,
0em 1em,
1em 1em,
2em 1em,
3em 1em,
4em 1em,
/* row 3 */
-2em 2em,
-1em 2em,
4em 2em,
5em 2em,
/* row 4 */
-3em 3em,
-2em 3em,
5em 3em,
6em 3em,
/* row 5 */
-4em 4em,
-3em 4em,
6em 4em,
7em 4em,
/* row 6 */
-5em 5em,
-4em 5em,
7em 5em,
8em 5em,
/* row 7 */
-6em 6em,
-5em 6em,
8em 6em,
9em 6em,
/* row */
-7em 7em,
-6em 7em,
9em 7em,
10em 7em,
/* row 9 */
-8em 8em,
-7em 8em,
10em 8em,
11em 8em,
/* row 10 */
-9em 9em,
-8em 9em,
11em 9em,
12em 9em,
/* row 11 */
-10em 10em,
-9em 10em,
12em 10em,
13em 10em,
/* row 12 */
-11em 11em,
-10em 11em,
13em 11em,
14em 11em,
/* row 13 */
-12em 12em,
-11em 12em,
14em 12em,
15em 12em,
/* row 14 */
-13em 13em,
-12em 13em,
15em 13em,
16em 13em,
/* row 15 */
-14em 14em,
-13em 14em,
16em 14em,
17em 14em,
/* row 16 */
-15em 15em,
-14em 15em,
17em 15em,
18em 15em,
/* row 17 */
-16em 16em,
-15em 16em,
18em 16em,
19em 16em,
/* row 18 */
-17em 17em,
-16em 17em,
19em 17em,
20em 17em,
/* row 19 */
-17em 18em,
-16em 18em,
19em 18em,
20em 18em,
/* row 20 */
-17em 19em,
-16em 19em,
19em 19em,
20em 19em,
/* row 21 */
-17em 20em,
-16em 20em,
19em 20em,
20em 20em,
/* row 22 */
-16em 21em,
-15em 21em,
18em 21em,
19em 21em,
/* row 23 */
-15em 22em,
-14em 22em,
17em 22em,
18em 22em,
/* row 24 */
-14em 23em,
-13em 23em,
16em 23em,
17em 23em,
/* row 25 */
-13em 24em,
-12em 24em,
15em 24em,
16em 24em,
/* row 26 */
-12em 25em,
-11em 25em,
14em 25em,
15em 25em,
/* row 27 */
-11em 26em,
-10em 26em,
13em 26em,
14em 26em,
/* row 28 */
-10em 27em,
-9em 27em,
12em 27em,
13em 27em,
/* row 29 */
-9em 28em,
-8em 28em,
11em 28em,
12em 28em,
/* row 30 */
-8em 29em,
-7em 29em,
10em 29em,
11em 29em,
/* row 31 */
-7em 30em,
-6em 30em,
9em 30em,
10em 30em,
/* row 32 */
-6em 31em,
-5em 31em,
8em 31em,
9em 31em,
/* row 33 */
-5em 32em,
-4em 32em,
7em 32em,
8em 32em,
/* row 34 */
-4em 33em,
-3em 33em,
6em 33em,
7em 33em,
/* row 35 */
-3em 34em,
-2em 34em,
5em 34em,
6em 34em,
/* row 36 */
-2em 35em,
-1em 35em,
4em 35em,
5em 35em,
/* row 37 */
-1em 36em,
0em 36em,
1em 36em,
2em 36em,
3em 36em,
4em 36em,
/* row 38 */
0em 37em,
1em 37em,
2em 37em,
3em 37em,
/* header (head) */
/* row 8 */
-3em 7em,
-2em 7em,
-1em 7em,
0em 7em,
/* row 9 */
-4em 8em,
-3em 8em,
-2em 8em,
-1em 8em,
0em 8em,
1em 8em,
/* row 10 */
-4em 9em,
-3em 9em,
-2em 9em,
-1em 9em,
0em 9em,
1em 9em,
/* row 11 */
-4em 10em,
-3em 10em,
-2em 10em,
-1em 10em,
0em 10em,
1em 10em,
/* row 12 */
-4em 11em,
-3em 11em,
-2em 11em,
-1em 11em,
0em 11em,
1em 11em,
/* row 13 */
-3em 12em,
-2em 12em,
-1em 12em,
0em 12em,
/* body (body) */
/* row 15 */
-3em 14em,
-2em 14em,
-1em 14em,
0em 14em,
/* row 16 */
-4em 15em,
-3em 15em,
-2em 15em,
-1em 15em,
0em 15em,
1em 15em,
/* row 17 */
-4em 16em,
-3em 16em,
-2em 16em,
-1em 16em,
0em 16em,
1em 16em,
/* row 18 */
-4em 17em,
-3em 17em,
-2em 17em,
-1em 17em,
0em 17em,
1em 17em,
/* row 19 */
-4em 18em,
-3em 18em,
-2em 18em,
-1em 18em,
0em 18em,
1em 18em,
/* row 20 */
-4em 19em,
-3em 19em,
-2em 19em,
-1em 19em,
0em 19em,
1em 19em,
/* row 21 */
-4em 20em,
-3em 20em,
-2em 20em,
-1em 20em,
0em 20em,
1em 20em,
/* row 22 */
-4em 21em,
-3em 21em,
-2em 21em,
-1em 21em,
0em 21em,
1em 21em,
/* row 23 */
-4em 22em,
-3em 22em,
-2em 22em,
-1em 22em,
0em 22em,
1em 22em,
/* row 24 */
-4em 23em,
-3em 23em,
-2em 23em,
-1em 23em,
0em 23em,
1em 23em;
}
}
/* baby making animation */
@keyframes work {
50% {
box-shadow:
/* sidebar (arms) ***********************************/
2em 15em,
2em 16em,
3em 16em,
3em 17em,
4em 17em,
4em 18em,
5em 18em,
5em 19em,
6em 19em,
6em 20em,
7em 20em,
7em 21em,
8em 21em,
8em 22em,
9em 22em,
/* footer (legs) ***********************************/
/* row 26 */
-4em 25em,
-3em 25em,
-2em 25em,
-1em 25em,
0em 25em,
1em 25em,
/* row 27 */
-4em 26em,
-3em 26em,
-2em 26em,
-1em 26em,
0em 26em,
1em 26em,
/* row 28 */
-4em 27em,
-3em 27em,
-2em 27em,
-1em 27em,
0em 27em,
1em 27em,
/* peepee (wiener) ***********************************/
2em 27em,
3em 27em,
4em 27em,
5em 27em,
/* row 29 */
-4em 28em,
-3em 28em,
-2em 28em,
-1em 28em,
0em 28em,
1em 28em,
/* row 30 */
-3em 29em,
-2em 29em,
-1em 29em,
0em 29em,
1em 29em,
/* row 31 */
-3em 30em,
-2em 30em,
-1em 30em,
0em 30em,
1em 30em,
/* row 32 */
-3em 31em,
-2em 31em,
-1em 31em,
0em 31em,
1em 31em,
/* row 33 */
-3em 32em,
-2em 32em,
-1em 32em,
0em 32em,
1em 32em,
/* row 34 */
-3em 33em,
-2em 33em,
-1em 33em,
0em 33em,
1em 33em,
/* row 35 */
-3em 34em,
-2em 34em,
-1em 34em,
0em 34em,
1em 34em,
/* row 36 */
-2em 35em,
-1em 35em,
0em 35em,
1em 35em,
/* partner (receiver) ***********************************/
/* row 24 */
7em 23em,
8em 23em,
9em 23em,
10em 23em,
11em 23em,
12em 23em,
13em 23em,
14em 23em,
15em 23em,
/* row 25 */
6em 24em,
7em 24em,
8em 24em,
9em 24em,
10em 24em,
11em 24em,
12em 24em,
13em 24em,
14em 24em,
/* row 26 */
6em 25em,
7em 25em,
8em 25em,
9em 25em,
10em 25em,
11em 25em,
12em 25em,
13em 25em,
/* row 27 */
6em 26em,
7em 26em,
8em 26em,
9em 26em,
10em 26em,
11em 26em,
12em 26em,
/* row 28 */
6em 27em,
7em 27em,
8em 27em,
9em 27em,
10em 27em,
11em 27em,
/* row 29 */
6em 28em,
7em 28em,
8em 28em,
9em 28em,
10em 28em,
/* row 30 */
7em 29em,
8em 29em,
9em 29em,
/* row 31 */
8em 30em;
}
100% {
box-shadow:
/* sidebar (arms) ***********************************/
1em 15em,
1em 16em,
1em 17em,
2em 17em,
2em 18em,
3em 18em,
3em 19em,
4em 19em,
4em 20em,
5em 20em,
5em 21em,
6em 21em,
6em 22em,
7em 22em,
/* footer (legs) ***********************************/
/* row 26 */
-3em 25em,
-2em 25em,
-1em 25em,
0em 25em,
1em 25em,
2em 25em,
/* row 27 */
-3em 26em,
-2em 26em,
-1em 26em,
0em 26em,
1em 26em,
2em 26em,
/* row 28 */
-3em 27em,
-2em 27em,
-1em 27em,
0em 27em,
1em 27em,
2em 27em,
/* peepee (wiener) ***********************************/
2em 27em,
3em 27em,
4em 27em,
5em 27em,
6em 27em,
/* row 29 */
-3em 28em,
-2em 28em,
-1em 28em,
0em 28em,
1em 28em,
2em 28em,
/* row 30 */
-2em 29em,
-1em 29em,
0em 29em,
1em 29em,
2em 29em,
/* row 31 */
-2em 30em,
-1em 30em,
0em 30em,
1em 30em,
2em 30em,
/* row 32 */
-2em 31em,
-1em 31em,
0em 31em,
1em 31em,
2em 31em,
/* row 33 */
-2em 32em,
-1em 32em,
0em 32em,
1em 32em,
2em 32em,
/* row 34 */
-2em 33em,
-1em 33em,
0em 33em,
1em 33em,
2em 33em,
/* row 35 */
-1em 34em,
0em 34em,
1em 34em,
2em 34em,
/* row 36 */
-2em 35em,
-1em 35em,
0em 35em,
1em 35em,
2em 35em,
/* partner (receiver) ***********************************/
/* row 24 */
5em 23em,
6em 23em,
7em 23em,
8em 23em,
9em 23em,
10em 23em,
11em 23em,
12em 23em,
13em 23em,
14em 23em,
15em 23em,
/* row 25 */
4em 24em,
5em 24em,
6em 24em,
7em 24em,
8em 24em,
9em 24em,
10em 24em,
11em 24em,
12em 24em,
13em 24em,
14em 24em,
/* row 26 */
4em 25em,
5em 25em,
6em 25em,
7em 25em,
8em 25em,
9em 25em,
10em 25em,
11em 25em,
12em 25em,
13em 25em,
/* row 27 */
4em 26em,
5em 26em,
6em 26em,
7em 26em,
8em 26em,
9em 26em,
10em 26em,
11em 26em,
12em 26em,
/* row 28 */
4em 27em,
5em 27em,
6em 27em,
7em 27em,
8em 27em,
9em 27em,
/* row 29 */
4em 28em,
5em 28em,
6em 28em,
7em 28em,
8em 28em,
9em 28em,
/* row 30 */
5em 29em,
6em 29em,
7em 29em,
8em 29em,
9em 29em,
/* row 31 */
6em 30em,
7em 30em,
8em 30em,
/* row 32 */
6em 31em,
7em 31em,
8em 31em,
/* row 32 */
6em 32em,
7em 32em,
8em 32em;
}
}The Result
Something only a mother could be proud of.
I was able to get the man, the myth, the legend to tweet me back. Achievement unlocked. ;)
@usabilitydick oh my.fine work, sir.
— Paul Irish (@paul_irish) October 23, 2012
