CSS Art Workshop

blinry
Hackover 2017

Setting the stage




/* CSS */

Setting the stage




/* CSS */

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}
codepen.io/anon/pen/zERqLQ

Shapes: Circle

/* codepen.io/anon/pen/zERqLQ */

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

Shapes: Circle

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
    border-radius: 100px;
}

Shapes: Oval

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
    border-radius: 0px;
}

Shapes: Oval

div {
    width: 200px;
    height: 100px;
    background: blue;
    position: relative;
    left: 150px;
    top: 200px;
    border-radius: 100px / 50px;
}

Shapes: Triangle

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: blue;
    left: 150px;
    top: 150px;
}

Shapes: Triangle

div {
    width: 0px;
    height: 0px;
    position: relative;
    left: 100px;
    top: 130px;
    border-color: transparent transparent blue transparent;
    border-width: 0px 150px 250px 150px;
    border-style: solid;
}

Gradients

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

Gradients

div {
    width: 200px;
    height: 200px;
    background: repeating-radial-gradient(at 20% 20%,
        blue, blue 10px, transparent 10px, transparent 20px),
        linear-gradient(to top, red, yellow);
    position: relative;
    left: 150px;
    top: 150px;
}

Box Shadows

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

Box Shadows

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
    box-shadow: 50px 100px 0px -30px white,
                100px -20px 0px 10px red;
}

Pseudo Elements

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

Pseudo Elements

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

div:before {
    content: "";
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    left: -50px;
    top: 50px;
}

div:after {
    content: "";
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 50px;
    top: 100px;
}

2D Transforms

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

div:before {
    content: "";
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 0px;
}

2D Transforms

div {
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    left: 150px;
    top: 150px;
}

div:before {
    content: "";
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 0px;
    top: 0px;
    transform: rotate(10deg) scale(0.7);
    transform-origin: bottom left;
}

Text Content

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: blue;
    left: 150px;
    top: 150px;
}

div:before {
    content: "";
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0px;
    top: 0px;
}

Text Content

div {
    width: 200px;
    height: 200px;
    position: relative;
    background: blue;
    left: 150px;
    top: 150px;
}

div:before {
    content: "Foo\A\A Bar";
    white-space: pre;
    background: red;
    width: 200px;
    height: 30px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 170px
}

Putting it together

div {
    width: 400px;
    height: 400px;
    background: linear-gradient(
        to right,
        #333 0%,
        #333 10%,
        transparent 10%,
        transparent 90%,
        #333 90%,
        #333 100%
        ),
    linear-gradient(
        to top,
        #60a582 0%,
        #60a582 5%,
        transparent 5%,
        transparent 56%,
        #60a582 56%,
        #60a582 60%,
        #333 60%,
        #333 100%
        ),
    repeating-linear-gradient(
        to top,
        #c2c6c4 0px,
        #c2c6c4 30px,
        #60a582 30px,
        #60a582 32px
        );
    position: relative;
    top: 50px;
    left: 50px;
}

div:before {
    color: #007;
    white-space: pre;
    width: 200px;
    height: 130px;
    background: linear-gradient(to top right, #555, #ccc);
    position: absolute;
    top: 0;
    left: 100px;
    border-radius: 0 0 12px 12px;
    box-shadow: -50px 0 0 #444;
    content: "\A\A\A\A\A\A
 
";
    font-size: 27px;
    text-align: left;
    font-style: italic;
    font-family: "Comic Sans MS";
}

div:after {
    width: 45px;
    height: 100px;
    background: transparent;
    position: absolute;
    border-radius: 0 0 0 0;
    top: -11px;
    left: 360px;
    box-shadow: -140px 30px 0 0px #333,
        -2px 287px 0 -14px #333,
        -2px 300px 0 -15px #222;
    content: "◥";
    font-size: 30px;
    color: black;
    text-align: right;
    font-family: Arial;
}

Workshop time!