-
-
Starting out...
-
First stage reached!
-
Christmas Time!'s final form...
Inspiration
One day, my friend and I wanted to suprise another friend with a jokey gift. We brainstormed up a Christmas-themed website, and attemped to create it together. Now, I have revisited the idea (solo), and created an entirely new version, that uses pure CSS, and upgraded the eligability of the code.
What it does
My website has a little clickable box, that floats around the screen. It cycles through 11 different states, each with a different text/image. The background color of the box also changes, through 3 different Christmas-y colors. It also has 2 different 'stages' to the website: Firstly, it adds Christmas trees to the website, then it adds marquee-esc Christmas-kittens to the top and bottom, as well as the top 5 christmas songs, and a link to the website I pulled them from.
How I built it
Starting off, I created a new file, just to test how to cycle through 3 different clickable boxes. Using the power of stackoverflow, I found someone that did something similar. I then modified it, so that it toggled between them, using the for="" attribute of the label, layered the input <div> on top, and made them both invisable. I then re-used, and modified a cool animation that cycles (with abrupt transistions) the background color of each label, from red, to green, to white. I then made each different box have its own unique text or image, by using <img> tags. Then I added more labels, to create the final 11 different ones, and started on the stages. Using logical OR operators in the CSS code, I made it so that for the trees, around 5 different inputs all did the same thing, making it seem like it was always on after a certain point. I did the same for both the cats, and the list of Christmas songs. The cats used an animation that makes it seem like it is looping, but it is just moving the length of one image, then jumping back invisably. Since the div (which had the cat background) was the length of the screen, plus one cat-length, it made a seemless loop. I did the same for the bottom, and they worked! For the Christmas songs, I put them in a <div> element, added a border and background for eligablility, and found the top 5 songs. I then used an <a> tag to reference it, and styled everything up.
Challenges I ran into
The main challenge that I ran into adding in the cycled states. So, using research I ran into Stackoverflow, and modified their code, by reverse engineering it, using mdnWebdocs to understand some of the tags, and then wrote my own version, but with my own notation, using different classes and ids and for= s, so that it became my own. Another was the animations, since it kept bugging out. So to fix that, I firstly slowed down the animation to really see what was happening. I found out that it glitched whenever it went from green to red. Looking at the animation, I found that I had forgotten the 100% tag, so I put that in, and voila!
Accomplishments that I'm proud of
I am proud that I was able to make the 11 different states with pure CSS, since I am way less familier with it than I am with JS. (I basically only use JS for anything, even if I shouldn't.) Since the project took around 200 lines of CSS, I think that's a big accomplishment. One more accomplitshment that I'm proud of is the box-shadow, since it changes based on the positionning of the clickable box. I feel that it adds a bit more polish to the project.
What I learned
Among other things, I learned a lot more about how CSS handles events, and how to manipulate that to do pretty much whatever I want. I learned more about styling, links, and the formatting and commenting of CSS. I learned a lot more HTML tags than I knew before, and how different attributes work. Another thing that I learned was that you can have multiple classes, if they are seperated by a space in the class attribute. I found that to be very cool, and very helpful.
What's next for Christmas Time
Next, I think that Christmas Time might try to become an interactive game. I feel like this will add to the magic of pure CSS, and would just be a fun challenge. Otherwise, I might try to add theme music to Christmas Time!
