Today’s project is yet another CSS variable one. To be quite honest, these sets of projects have helped me immensely in thinking of elements as components. Hey, react I’m looking at you bro. Anyhoo, as part of my CSS pure image challenge, I want to keep doing vector graphics, yet I didn’t want to take too long in it. I also wanted one where I can play with the colors because this project revolves around changing colors on the go. Pixels came into mind because whichever color you use it would still work perfectly so pixel heart it is! Lets start.
First looking for insparation, I came across Monica Dinculescu account and loved this pixel heart she designed! So I decided to model it. Doing things in sketch helps me in thinking of how to structure it in html, and css also a little sketch practice is always a good thing 😀
Then we move on to the code bit. Here’s an illustration of the process
have a slider which controls the rotation of the heart
inputs in each cube where users can enter a color value and said cube changes color
Fist slider. I added a range input and then targeted it to change the value of the CSS variable whenever a change is triggered and it works
Finally the last bit where it’s all about colors, just as any interaction you first grab a reference of the input[s] set a handler for the event and update the result and bam! we have a colorful heart <3
This was a really fun project, reminded me of how much I used to enjoy doing this 180 projects.