Pure CSS Drawing Essentials

The top 5 CSS properties I rely on to produce Pure CSS art

border-radius

css3.info/preview/rounded-border/

border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;

For most web development purposes, only one parameter is needed for border-radius. Something like border-radius: 10px; to get a nice rounded-corners button.

However - for custom rounded elements that are meant to mimic organic objects like faces, it is imperative that you become intimately familiar with all eight available parameters in the border-radius property.

See what PureCSS Francine looks like without border-radius

box-shadow

developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;

Layering multiple box-shadows is one of the best ways to add depth. Box-shadows will adhere to the edge of the html container and will even follow a path altered by border-radius.The parameters are as such:

border-radius: [X axis], [Y axis], [blur radius], [spread outward or inward];

box-shadow: -15px -15px 5px -10px blue, 6px -11px 20px 1px red, inset 5px 5px 35px 10px green;

And remember - order matters! From left to right = top to bottom.

See what PureCSS Francine looks like without box-shadow

transform

css-tricks.com/almanac/properties/t/transform/

transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);

To alter elements to give them a sense of movement or perspective, transform is an excellent way to set them apart from standard 0° rectangles.

transform: rotate(-45deg) scale(0.7, 1.3) skew(25deg, 30deg);

These properties can also be used all at once.

transform: perspective(10px) rotateY(5deg);

You can also use rotateX() and rotateY() with perspective() to create depth-of-field or perspective, or just to create a trapezoidal shape.

See what PureCSS Francine looks like without transform

linear-gradient, radial-gradient

w3schools.com/css/css3_gradients.asp

background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);

Gradients follow a set path specified by linear (straight), or radial (circular and elliptical).

See what PureCSS Francine looks like without background image gradients

overflow

www.w3schools.com/cssref/pr_pos_overflow.asp

overflow: hidden;

This is one of the simplest tools, but it's one of my favorites. It's a way of stuffing lots of messy elements into one neat package, and it allows you to create some interesting shapes as a result.

This example is the same one we used in the prior transform example. We've just set an overflow: hidden; on its parent container.

See what PureCSS Francine looks like without overflow: hidden