The top 5 CSS properties I rely on to produce Pure CSS art
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.
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];
And remember - order matters! From left to right = top to bottom.
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.
These properties can also be used all at once.
You can also use rotateX() and rotateY() with perspective() to create depth-of-field or perspective, or just to create a trapezoidal shape.
Gradients follow a set path specified by linear (straight), or radial (circular and elliptical).
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.