Playing with CSS3: background opacity
Published on July 22, 2009
I am of course interested in css3 and html5, but with about 30% of italian users that still use the ******* IE6, I don’t know how long will I have to wait to really use these techniques.
BTW, css3 is so amazing that I hope it could contribute in killing IE6 (although Microsoft seems to be always soooo stupid, see Fix Outlook and their answer) that I’m not sure that the pain with IE will stop with the death of the terrible version 6.
One of my favourite features in css3 is opacity. I love opacity solutions on every media and it’s a pain that there is no way to use it safely on the web, for now.
Altough I try to validate the css on every work of mine, sometimes I’ve used the moz-opacity and the filter: alpha(opacity) trick to have opacity on IE and Firefox. The problem is that not only the div, but also its content inherits CSS opacity, so the text is harder to read, images are ugly to see, the border or some other elements are not of the expected color, and so on.
The PNG solution is a pretty good alternative, but it fails on IE6. And of course it’is boring, as you have to create your .png on Photoshop, then it is not transparent enough, then you have to do a new png, ecc.
CSS3 offer a great and quick solution with rgba (red/green/blue/alpha). It’s enough to set
background-color: rgba(255,255,255,.5);
to have a white background with 50% opacity.
There is, there is
- Here is a working example (that presents some other css3 killer feature, including the most wanted pure css rounded corners) to see how quick and affordable is this new solution. Hopefully can we use it asap on real websites.
- And yes, you can download it and test it on your computer.
Thank you for your introduction.
Can you tell me how I can transform this color #B1B1B1 into rgb parameters? Or colors at all?
I have also the problem with not wanted text-opacity. I solved this problem with two divisions with the same coordinates. They lay over each other.
This is very difficult because I work with absolute positions. (You can look at my homepage.)
Now I would like to use relative positions and margins to ease my work. But this only works with one division at all (for a text unit) and the background opacity.
If I understand you right the background feature is for the div-tag and then you can write your text without opacity in the p-tag.
Thank you and greetings from germany
Hallo Sebastian, deine Homepage ist wunderbar, was für eine fantastische Idee.
Für deine erste frage, benutze ich normalerweise Photoshop, aber es gibt viele nützliche webseiten, z.b. http://www.translatum.gr/converter/hexadecimal.htm
Ok, genug mit meinem Deutsch!
Regardig your 2nd question, I’m not sure I’ve understood, but combining css3 and css2 you can decide wether to give semitransparency to the text or keep it 100% solid.
Let me know if that is what you’re looking for, I’m interested in your project.
Bis bald
Luca
Hello Luca,
your German is perfect. The rgb-thing works on my homepage. That’s very good for me because I don’t need to create two divisions over each other. And it is easier or at all possible to work with relative positions so that I can easily write a text with many text units.
I worked with absolute positions before. So I had to change every single position of each text unit (and the opacity-division behind!) when I wrote or changed a text.
But now I have another problem. The margin-tag doesn’t work anymore. I think this is due to the relative positioning. I formerly used margin-top to create a distance from the top of the division to the text (or a headline). This worked very well.
But now the margin-top-thing doesn’t relate to the top of the division but to the end of the upper division (the division above). (And there is no distance now between the top of a division and the text below.) There is a crazy relationship now and I think it is due to the relative position.
I solved this problem for the first time with padding within the p-tag of the text. I hope my description is not to difficult. I’m not a profi.
The padding is not the best because if I make a headline with padding this rules the distance not only to the top but also to the bottom. But I need the padding for the text under the headline to rule the distance from the text downwards to the bottom of the division. So I have two paddings between the headline and the text below wich creates a not wanted big distance.
This is my main problem now.
I don’t know how to have a good work with margin-top and padding under the condition of relative positions. How I said the margin-top-thing in the p-tag doesn’t work correctly anymore. It relates itself to the next division, not to its own division or to a headline.
I don’t believe that it has something to do with the rgb-thing and the fact that I only use one division now for opacity-background and text. But I can’t exclude it.
I hope you understood my writing.
PS: It’s very funny to write about this silly and dumb gender-ideology. Do you have special experiences with it?
thanks for this. it really helped. I was looking to keep the content opaque and the background transparent. thanks