Very Extremely Practical CSS Art

CSS art has always fascinated me, although I rarely try it myself. Although familiar with many techniques, I am still surprised every time I see the creator build a smooth and beautiful image with a simple box. I often use developer tools to study the mysteries behind it, but I never witnessed the creative process.

Whenever CSS art works get attention, there are always people who comment "this is not practical" or "just use SVG directly", and statements like this are both rash and boring. Even if these claims are true, it is a bad argument—no one is asked to pursue practicality all the time. In that case, how boring the world would be!

In October, I had the honor of watching a single div creation live broadcast by one of my favorite CSS artists Lynn Fisher (Twitter, CodePen). I once mistakenly thought that single div works rely on extremely complex box shadows—almost a pixel art approach. I'm not sure where this idea comes from, maybe I saw someone do it a few years ago. But her creative process is much more “normal” and “practical” than I expected: She cleverly uses some background gradients of layering, scaling and positioning.

Wait, I know how to do it! It’s not that the technology itself has magic, but that she’s courage to transform several gradients into a piece of cheese with cake inside!

I've used these properties in my client projects before. I've created gradients, layered images, resizes and positions for various effects. None of these are new, neither complicated or radical. I haven't learned anything new about CSS itself. But this greatly changed my perception of what these simple tools can achieve.

Within a few weeks, I applied this technique to a production environment. Again, there is nothing strange or complicated about this - it's like a low-hanging fruit at your fingertips, in which case the custom SVG appears slightly bulky. Here is the effect I created for my personal project, using some custom properties to simplify the tweaks:

Last week, we used similar tricks in a very practical and official library of customer components. This is Stacy Kvernmo's idea and it works very well.

Thanks to Lynn, and all other talented CSS artists! Thank you for showing us the heights that we love and the “very serious” tools we use every day can achieve.

The above is the detailed content of Very Extremely Practical CSS Art. For more information, please follow other related articles on the PHP Chinese website!