Extract UI Items

Octocat

User Interface Discussion

The reason I choose this one was because it was one of the first big things to stand out. It was interesting how the wiskers went out of the box it was on asnd then how on the other side the wiskers go under the letters

One of the first things I can see is they used float left on the cat to get it on the left side of the box. Then the moved the text to the right of the div to get it out of the way of the cat, but I can not seem to figure out how they got the words over the wiskers.

Down Arrow

User Interface Discussion

I thought this was interesting since the way that it goes over the box and if it is a image of made.

They used float right just like the octocat and they did add transparent picutre as the arrow, they had to adjust the width and height to get it to postion nextto the letters.

Red Warning Box

User Interface Discussion

I thought this was interesting because all of the differnt things on it and how it wrapped around the edge on the left side.

The way they did all of it was all involved with different classes, for example the words with that are inside the darker box was created by a class and a box shadow. Then on the outside to make it look like it was wrapping that was seperate part from the main box as well and they created a triangle to ad to the corner to make it look like it is connecting.

Nav Box

User Interface Discussion

This one stood out to me because I though the red line under each title was interesting looking and same as the little arrow connected to the main content but pointing to the link you have open.

For this it was way more simple than I though and all they did was put a bottom border under the heading and turned it red, they then used padding to move the heading over to the left so it looks differnet. For the triangle the just added a triangle to the box but I am unsure how they had it change to the right one on each page. I think it might be a link psuedo class.