The latest articles on DEV Community by Torben (@torbentee). https://dev.to/torbentee https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F21132%2F9c457ca6-44cd-4074-9328-8f48f50f14cb.jpg https://dev.to/torbentee en Torben Thu, 28 Mar 2024 15:04:02 +0000 https://dev.to/torbentee/meet-tilly-crafting-a-cute-tiger-with-css-magic-4060 https://dev.to/torbentee/meet-tilly-crafting-a-cute-tiger-with-css-magic-4060 <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>Some time ago I was on a streak at cssbattle.dev. That was a lot of fun. And when I saw this challenge I knew I had to submit something cool. The idea came from a puzzle game from my godchild.</p> <h2> Demo </h2> <p><em>Hint hover over Tilly</em><br> <iframe height="600" src="https://codepen.io/torbentee/embed/NWmjwbE?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>Most parts where quiet straightforward because I have some experience from cssbattle.dev. But the mouth and the straight line above it where very difficult. I tried different things and came up with a "U" and hiding some crooked parts beneath the vertical line. Which is actually several lines which are in a slight angle. All in all was is a fun journey to build a cute little tiger named Tilly.</p> <h2> License </h2> <p>MIT License</p> <p>Copyright (c) [2024] [Torben Tietze]</p> frontendchallenge devchallenge css