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