Learn CSS Art

Inspiration

The first CodePen I ever saw was this beautiful galaxy with stars and planets, similar to this example: https://codepen.io/tadywankenobi/pen/QbWNGR. I was in awe and mystified by how creative coders could do such a thing with ONLY CSS. At this Hackathon, I wanted to learn how to make CSS art and then follow the education track to teach a bit of CSS art! While contemporary and not your usual hack, I believe CSS art is an important tool in a front-end developer's understanding of color, shapes, layers, and one of the tracks they can use to manipulate their sites.

What it does

My hack was a website walkthrough of how to make CSS art as well as CodePens to CSS art I created! It underlines the core understanding of CSS art: from simple shapes to layered shapes that make visuals, up to basic animations!

How I built it

I looked at a lot of CSS tutorials! From beginners guide to CSS art to scrolling through advanced CodePens I can't even begin to understand, I started with simple shapes, made a lot of mistakes, followed some tutorials, made some of my own, and ultimately just messed around with CSS until I began to understand it more.

Challenges I ran into

CSS art is difficult! The more intricate the shape, the more points there are to change and mess up. I had a lot of trouble with the hexagonal shape and anything more than a triangle, really. It's because to make a hexagon I made three rectangles and angled them to make a hexagon, but attempting to change the dimensions or border-radius would mess it up a lot. I tried to create the SD Hacks logo out of CSS but it proved to be a challenge for a time when I have more experience.

Accomplishments that I'm proud of

Admittedly I did not start on this project until quite late because I wanted to finish my homework and study for my upcoming midterm first. By that point, it was late into the night and I wasn't sure whether I wanted to stay or not. But I come to Hackathons to learn and gain at least a small new skillset so I'm proud that I stayed through a got to learn new things.

What I learned

I learned the potential of being able to manipulate simple HTML divs through CSS to create interesting interactions between layers of shapes and animations of these particles together, especially without the use of JavaScript!

What's next for Learn CSS Art

I hope to learn more about the placement of shapes and nesting divs as well as creating more intricate animations! I'm always inspired and amazed by creatives that do challenges like "a CodePen a day."

Built With

• css