Monday, June 20, 2016

Fun with CSS3

I went through a revamp of my website,, about a year ago. The design was getting a bit stale for my tastes and didn't have the flair that other sites have. The organization of my HTML had gotten pretty out of hand, too, from all the edits and minor revisions that I made while trying to avoid a complete overhaul. Eventually, I made time to fix my website.

What bugged me the most about my older websites was that I had to use JavaScript to make my drop-down navigation menus. I don't generally think much of JavaScript, since it can get needlessly complicated very quickly. And this comes from a girl that's programmed in Java, C, Basic, PBasic, Python, and Propeller.

When I was tweaking my website a little while back, I had to look up some CSS notation. I generally go to W3Schools, since they give the most direct and simple answers. I saw the little demos they had on the main page for the pure CSS animations and got pretty fan girl excited. I've been animating since I was fourteen and have always loved the art form. Seeing that I had the potential to use CSS to create animations was the team up of my two loves: art and coding.

CSS has come a long way since when I first started web developing 10 years ago, as have my web design skills. CSS was a bit limited, but was still pretty powerful. Only needing to edit a few lines of code in a file separate from your HTML source code made it much easier to update my website's look as my design skills developed. Before I learned CSS, it was easy to miss a tag that would mess up the whole rest of the site if left behind during a revamp.

The update to CSS3 has made web design even simpler, since it eliminates the need for most Javascript. Animating a navigation bar with CSS takes only two or three lines of code, rather than the block of 5 or more lines in Javascript. Not only can you animate a nav. bar, you can also animate a little game with an animated avatar, like on this site. Apparently, I'm not the only animation nerd out there.

Web designing is rad and the tools for it just get better an better. I'm looking forward to seeing what new CSS tricks will be developed in the future.

No comments:

Post a Comment