I was chatting the other day with the owner of this site : When Tara Met Blog. I mentioned that the sidebar wasn’t particularly easy to read because the background of cocktail glasses with red liquid inside tended to obscure the black text and links. Since Tara told me that she didn’t have full control of all content on the pages due to the hosting platform she’s on, I didn’t know exactly what to suggest apart from getting rid of the background. Doing that would of course change the whole look and feel of the page.
Which got me to thinking about a single class change in the CSS file to give a slightly transparent background to the sidebar, in order to render it more legible without detracting from the style of the site. This is a simple, incremental improvement to the site. Instead of a redesign – why change everything all the time – a simple update to a couple of CSS classes can make a big difference to a blog.
So how do you achieve a transparent background for a block (DIV) in your page, without using a PNG file? Here’s how :
There are 3 declarations to cover different browsers.
# IE -> filter:alpha(opacity=50);
# Mozilla (version 1.6 and below inc. Firefox) -> -moz-opacity:0.5;
# CSS3 standard -> opacity: 0.5;
If you would like me to suggest an incremental improvement for your blog, using just a CSS class change or a very small change in your code, I’d be happy to have a look. Reply to this post or leave a question in the “Ask me a Question” section.