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 :
.myClass {
background-color: #fff;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
}
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;
This code was all gleaned from Ove Klykken’s eponymous site. Tara made the changes and links to me in this post. Thanks Tara!
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.
21/9/2005 at 4:21 pm
Again thanks for your help, it was very inventive and clever of you 🙂
22/9/2005 at 12:24 pm
Nice job.
22/9/2005 at 2:51 pm
I didn’t know you could do that?
I love learning new things….:)
Thanks for the tip!
23/9/2005 at 9:26 am
Thanks for your comments. As I surf around, I try to take note of stuff that I see in order to work out how it’s done. This little trick was inspired by a number of sites using transparency. Mostly people have used PNG files which have alpha transparency. GIFs have pixels that are either transparent or not, whereas PNG pixels can be partly opaque. When IE starts supporting PNG alpha transparency properly, you’ll start to see a lot more very neat rounded corners and stuff like that. The fact that CSS now allows transparency also allows a lot of useful effects, I hope Tara’s blog is a good example.
23/9/2005 at 11:54 am
wow! ..I’m thinking of all the background images I could use now that I’ve found this handy little tip of yours! I’m an html/css amateur (as is evident on my page :p) and if you’ve ever viewed my page in IE, you’ll see my borders dont quite fit my sidebar and main. I goofed around with my css and hid some padding values which made it look better in firefox, but its not right. if you have any suggestions for me, I’d be very appreciative 🙂
23/9/2005 at 2:10 pm
Hi Carrie,
I’ve never looked at your page in IE. I’ll have a look later on if I get time, I think I’ll probably be able to solve this question.
The model of margins and padding (referred to as the “CSS box model”) in IE and Firefox is different, so you have to hack stuff to make different values available to each browser…
-Fruey
24/9/2005 at 9:31 pm
Problem with this is that it also makes the text opacities change and some elements. A good fix for that is to place the elements inside of another div or paragraph and give them another class and give them 100% opacity.
[p class=”noopacity”]text, images, or whatever[/p]
.noopacity {
background: transparent;
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity: 1.0;
}
If you ever wanted it to be valid CSS, you could also make a small gif background that is 2 by 2 pixels like this:
X0
0X
Where X is white and 0 is transparent and set that as the background.
Great fix. It makes reading the sidebar alot easier =)