This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Inspiration
I came across this image online of a senior shielding a junior from the perils of the work week, probably on Reddit, and I really love the sentiment behind it. It captures the nurturing dynamic between seniors and juniors, which can also apply to other work relationships where leaders guide their team members.
Demo
(View at 0.5x scale if its too big for embed window)
Journey
First off, my inspiration and reference photo:
I really love that image! I couldn't find the creator, so if you know who it is, please leave a comment!
For my process, I used some light JavaScript to "trace" my inspiration image. I could toggle the reference image on and off by pressing "T" and show or hide all the CSS with "Y." This helped me ensure I was getting the lines just right.
At first, I was using divs with rounded edges, but after moving from junior to senior, I realized I needed a more powerful tool: clip-path: polygon(). This was the real game-changer! You provide the polygon() function with x and y coordinates for each vertex, allowing you to create any shape you need. I found that you can't add a border to the polygon, so each piece of armor and the senior has a black shape behind it, with a slightly smaller colored shape in front to create the outline effect.
I did all the work locally with vs code and chrome browser / devtools, then once finished created a codepen.
My workflow / desktop layout looked like this:
Toggling the reference image:
Layout / workspace on one monitor:
Using opacity and group border indicators:
Takeaways
This was a fun project and I got a lot of practice with clip-path and had some fun experimenting. In the future I'm looking to add the details to the armor and some lighting effects using gradients!
Thanks for checking out my entry! Please leave a reaction if you enjoyed it, and a comment if you have your own entry or have used clip-path and/or polygon() in interesting ways!
Top comments (0)