Today’s website was all css animation! In reality, I did not think much about the animation part until I finished drawing the lights. I watched some clips on youtube of flickering neon lights and also looked at images for inspiration.
I loved all the fun images I found through google. (Look at those awesome neon shoes!) By looking at the lights closely, I noticed that the “brightest” part of the light was technically not the most center. The center was the lightest in colour, almost close to white, but the bright “neon” color was found in the surrounding area. I used css text-shadow and blurred a few colours together. The order from innermost to outermost was: lightest colour, the neon colour of the light, and then darker colours in the same family.
After setting up the lights, I used css keyframes to make the lights flicker. Changing the opacity and removing the text-shadow made the lights look like they were off. I listed percentages that were very close to one another to toggle the lights between on and off quickly. If the percentages were further apart, the light would “fade away” or “fade back” which is not the way neon lights flicker.
Note: I got stuck making the second animation (bottom words) and was really bewildered as to why it would not work even if I copied the code from the first animation. Turns out I had missed an ending } so the first animation ran with no problems, leaving the second one in the dust. Lights, I demand that you be broken! I hope I didn’t make the lights too annoying. Richerd thought it was an image so I must have done a decent job!
Day 12 – Neon Lights: open for business 24/7 now and forever.