CSS in practice: The Beauty Department

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.

Screen Shot 2015-03-05 at 8.46.48 AM

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:

Screen Shot 2015-03-05 at 10.06.06 AM

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:

Screen Shot 2015-03-05 at 11.04.25 AMScreen Shot 2015-03-05 at 11.03.41 AM

But if you double the width in the css, the word actually repeats.

Screen Shot 2015-03-05 at 11.04.10 AMScreen Shot 2015-03-05 at 11.04.00 AM

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.

After looking at the code for the site, I think the unusual tilted navigation bar is actually part of the Javascript, not the CSS and it was complicated enough that to be honest I still don’t understand how they managed it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s