The Beauty Department is a Tumblr-esque blog with content like hair and makeup tips. The site is very visual as they rely heavily on photos. I was interested in looking at their CSS for two reasons:
1. The styling is very consistent throughout the site- from the grid they use to the colors of the text, each page matches the others.
2. The header image and navigation toolbar are on a slant, which is not something I see often and am interested in how they accomplished this.
The CSS is fairly long (570 lines) but simply and cleanly done. One thing I found really interesting was the use of images rather than normal text in almost all of their navigation options-including the search bar:
Instead of defining the text in the html, the site designers used an image file of the word (in this case “search”) and used css to style the size and properties of that image. This seems like an unnecessary choice to me. Perhaps the font they wanted was not browser-friendly, but even if that’s the case the font could have easily been replaced with a different one to avoid unnecessary complications. You can see the effects of this odd choice by altering the css.
The css as they published it:
But if you double the width in the css, the word actually repeats.
This is especially odd because it means the image is either being duplicated or the original image is the word “search” several times. Either way, this is just plain weird.
On a higher note, the css color choices are both carefully chosen and effective. The header image has three bright colors: the yellow of the brush (#DCD267), the pink underline (#ce5080), and the blue-green of the nail polish. These colors make up the entire color scheme of the site. The pink is used for the navigation and headers, the green for the rollover text, the yellow for categories and links.