The latest articles on Forem by chr1stine (@chr1stine). https://forem.com/chr1stine 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%2F753423%2F9716306e-9670-4b72-8b86-9e541ad28d01.png https://forem.com/chr1stine en chr1stine Fri, 31 May 2024 23:04:22 +0000 https://forem.com/chr1stine/barberpole-1bao https://forem.com/chr1stine/barberpole-1bao <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-05-29">Frontend Challenge v24.04.17</a>, CSS Art: June.</em></p> <h2> Inspiration </h2> <p>A barber's pole</p> <h2> Demo </h2> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://codesandbox.io/p/sandbox/barberpole-wgqlty?file=%2Findex.html%3A67%2C26&amp;amp;layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clwv5wqa20006286947ysgzq1%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clwv5wqa200022869e4s20kjf%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clwv5wqa200032869iioia7i0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clwv5wqa200052869pbjhstvq%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B64.49654783313063%252C35.503452166869366%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clwv5wqa200022869e4s20kjf%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwv5wqa200012869sgrermtj%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A67%252C%2522startColumn%2522%253A26%252C%2522endLineNumber%2522%253A67%252C%2522endColumn%2522%253A26%257D%255D%257D%255D%252C%2522id%2522%253A%2522clwv5wqa200022869e4s20kjf%2522%252C%2522activeTabId%2522%253A%2522clwv5wqa200012869sgrermtj%2522%257D%252C%2522clwv5wqa200052869pbjhstvq%2522%253A%257B%2522id%2522%253A%2522clwv5wqa200052869pbjhstvq%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwv5wqa200042869u68r8i49%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clwv5wqa200042869u68r8i49%2522%257D%252C%2522clwv5wqa200032869iioia7i0%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clwv5wqa200032869iioia7i0%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" rel="noopener noreferrer"> codesandbox.io </a> </div> <h2> Journey </h2> <p>I don't usually do anything creative with css, but when I do, it's super random.</p> <p>Just kidding, I just learnt what it's called (the barber's pole thing) and read some history on <a href="https://en.wikipedia.org/wiki/Barber%27s_pole">wikipedia</a> about it, then looked at the gif for too long, and the idea to make css art out of it just came up. Then I somehow ended up here, on dev.to and saw this challenge thing</p> frontendchallenge devchallenge css