The latest articles on Forem by Zachary Torr (@stardexterity). https://forem.com/stardexterity 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%2F1370579%2Fb4284f73-4d6e-4290-8db0-41bdf5f57be2.jpeg https://forem.com/stardexterity en Zachary Torr Thu, 21 Mar 2024 10:40:15 +0000 https://forem.com/stardexterity/ice-cream-cone-for-dev-challenge-56oh https://forem.com/stardexterity/ice-cream-cone-for-dev-challenge-56oh <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>I have created a strawberry ice-cream cone.</p> <h2> Demo </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filckwb5jx7ojd41twvik.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filckwb5jx7ojd41twvik.png" alt="Image description"></a></p> <h2> Journey </h2> <p>To create this I used a combination of circles, ovals and triangles. I learnt about ::before and ::after to create more complex shapes without extra markup, and used the clip-path in combination with a background image to make a cone with texture. In the future I hope to use complex polygon shapes, work with gradients and try to add shading.</p> <h2> Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/StarDexterity" rel="noopener noreferrer"> StarDexterity </a> / <a href="https://github.com/StarDexterity/css-art-favorite-snack" rel="noopener noreferrer"> css-art-favorite-snack </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <div class="markdown-heading"> <h2 class="heading-element">Inspiration</h2> </div> <p>I have created a strawberry ice-cream cone.</p> <div class="markdown-heading"> <h2 class="heading-element">Demo</h2> </div> <p><a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f0c34879b4ca08450d20dccee26a6991d9ee909b0bade32a7340144d63fa37d0/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f696c636b7762356a78376f6a643431747776696b2e706e67"><img src="https://camo.githubusercontent.com/f0c34879b4ca08450d20dccee26a6991d9ee909b0bade32a7340144d63fa37d0/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f696c636b7762356a78376f6a643431747776696b2e706e67" alt="Image description"></a></p> <div class="markdown-heading"> <h2 class="heading-element">Journey</h2> </div> <p>To create this I used a combination of circles, ovals and triangles. I learnt about ::before and ::after to create more complex shapes without extra markup, and used the clip-path in combination with a background image to make a cone with texture. In the future I hope to use complex polygon shapes, work with gradients and try to add shading.</p> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/StarDexterity/css-art-favorite-snack" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> frontendchallenge devchallenge css