I knew, going into this class, that CSS was a powerful tool for designing the look of your web page. What I didn’t know was just how powerful. I learned that CSS can be used for more than just positioning and color. You can create interactive events using CSS as well. For example: CSS has pseudo-classes. These pseudo-classes can be used to select an element during an event suck as moussing over, clicking, or becoming active. This allows you to set all sorts of events into motion. You can cause an item to change colors, drop a shadow and even move slightly. This is a great way to make an item pop up off the page when you mouse over it.
One of my favorite CSS events occurs in the navigation menu. I was able to select the color, shape, and position of my menu items. In the case of this page, I selected a dark green for my color and rounded the corners. I them placed them in the header and floated them to the right of the page. I chose this setup because the colors complement the image and by floating them to the right it didn’t clutter up the title that was floating on the left. The real magic happens when you mouse over the menu items. I was able to use pseudo-classes to create a new look when the user mousses over the menu item. In this case, the color turns lighter green. This gives the effect of it lighting up and draws the user’s attention to the item. I like when an item that is interactive confirms with the user that "yes, I do something click me". More than that though, is the ability to hide and show objects that aren’t the item you’re interacting with. I can select a sibling element and place instructions to show a sibling element when the first element is being interacted with. This allowed me to create a menu item that spawned additional menu items when the user hovered over it.
In this class, we looked into a JQuery add-on for sliders. With this JQuery add-on we were able to cause a portion of our page to slide in and out of frame when we interacted with an element. In the case of my page, I used this to animate my side bar on the main home page. I picked this portion of the page to animate because I did not want to hide any part of the main content. In my layout the important part of the page was in the main section area. The aside was for less important content or additional information for the main topic. For that reason, I can hide the side bar and have it accessed through an interaction. This gives my user something to discover and encourages the user to explore my page further for hidden treasure.