Baby Under Construction

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. ;)

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*