The exercise for week 2 of class was to start implementing some of (what I consider to be) the more in-demand aspects of CSS3. Rounded corners, transparency, gradients, etc. I was pleased to find that CSS3 continues to have a logical pattern and progression as I learn more.
Part of the exercise was to take the comment page and make a few changes to make it our own, and make it unique, beyond what the in-book exercise covered. I took it one step further in the sense that as I previously stated my website had several flaws according to the optimizer. I decided to take the opportunity to apply what I learned in this exercise to my website and give it a complete CSS3 overhaul.
My former website was very image heavy, and relied heavily on floating divs and z index.
It did not scale well in different size browsers, as it was trapped within an 800x600 container div, in order to keep the many many layers of images aligned properly. I decided a better approach, to make my webpage more flexible was to remove those graphic elements that made it feel so strapped down. I opted to remove as many image elements as possible and stick mainly with elastic CSS elements. This not only made the website adjust much cleaner to fit the browser window, regardless of the size, but it also DRASTICALLY reduced load time.
I took the rounded corners we used on the lab page, but adjusted them to be slightly less. I also added a drop shadow to the box elements. I linked a font from google fonts for certain elements such as headers. I plan to eventually put a pattern or a gradient in the background of the page, and thus make the block elements semi-transparent. I did try to add a hover off-set to the links in my navigation, similar to the one used to make the speech bubbles jump on the exercise page, however it didn't seem to work. I suspect that it might work differently on block elements over text. I plan to investigate what I need to change to make text do a hover off-set.
All in all, I'm pleased with what I took away from the exercise and my ability to see how it has benefited me in other areas of web design already.
