I felt that the category headers looked a bit plain and isolated, so I decided to play around with adding the red star from the logo to each header. I decided to try to add this through CSS as a background image to the div containing the category titles so that I could keep the actual titles in HTML rather than have the text of the titles as part of the imported image (as I assume this will be beneficial with regards to SEO).
First I created an image of just the star, and added opacity. When saving for web, I noticed that PNG-8 converts the opacitated (not a real word – but should be!) image to the flat colour equivalent, whereas saving as PNG-24 keeps the opacity. This is interesting and will no doubt be relevant to future projects. However, in this instance the image will be sitting behind the HTML text and therefore the converted image will be fine:
I set the star image to show as a background to the actual containing div:
I was pleased with the effect on the titles that are made up of a single word, but the central star makes multiple worded titles look off centre:
I decided to try manually adjusting each necessary h2 tag individually with a margin-left setting,
However, this still doesn’t look good, so I have decided to try out having the star show to the left hand side rather than centrally.
This looks too sparse so I try moving aligning the titles to the left also:
…hmmm, I still don’t like the overall balance so I have decided to go back to square one.
I decided to change all of the category titles to one word only (which matches the titles in the nav bar), then add the additional words to an <h3> tag: