CSS - Border opacity

March 18th, 2007, 9:28 pm

Trying to figure out a way I can change the opacity of the border around a column.

Any ideas?

Quote:

#content {
float: left;
color: #333;
background: #fff;
border: 15px;
padding: 10px;
height: 350px;
width: 600px;
display: inline;
}

Thats the particular piece of code that needs that 15px border to be transparent...

Its late, i've googled away to no avail, and i just can't think of how to make it work right now.. my css reference book is also of no help right now.. maybe i just need some sleep and attack it tomorrow.

March 19th, 2007, 7:34 pm

You'll need to look into opacity, which isn't too widely supported cross-browser wide, so try not to make it a definitive feature of your design. Several probably won't be able to view it opaquely.

http://www.mandarindesign.com/opacity.html

March 19th, 2007, 7:44 pm

I haven't seen any methods for adjusting the opacity of a border without affecting the rest of the element.

I'm guessing this isn't somthing with a solid background behind it where you could just adjust the color to be what a partially transparent foreground color & background color would produce.

March 19th, 2007, 7:51 pm

You could possibly combine it with one of the popular scripts which is used to produce a shadow effect via a different layer, and then customize the opacity if that layer. That would recreate the solid bg joebert references.

March 19th, 2007, 8:00 pm

joebert wrote:

I'm guessing this isn't somthing with a solid background behind it where you could just adjust the color to be what a partially transparent foreground color & background color would produce.

Hmm....this could be feasible.

How about putting your #content div inside another div #transborder:

Code: [ Download ] [ Select ]

#content {
color: #333;
background: #fff;
padding: 10px;
height: 350px;
width: 600px;
display: inline;
}

#transborder {
float: left;
display:inline;
padding:15px; /* Here's a pseudo-border */
/*
Various opacity-changing properties here (unless they change the opacity of all contained elements

-OR-

background:url(transback.png); where transback.png is a translucent PNG image
*/
}

1. #content {
2. color: #333;
3. background: #fff;
4. padding: 10px;
5. height: 350px;
6. width: 600px;
7. display: inline;
8. }
10. #transborder {
11. float: left;
12. display:inline;
13. padding:15px; /* Here's a pseudo-border */
14. /*
15. Various opacity-changing properties here (unless they change the opacity of all contained elements
17. -OR-
19. background:url(transback.png); where transback.png is a translucent PNG image
20. */
21. }

I know, I know, PNG support isn't perfectly cross-browser either, but it's better than a bunch of -moz-opacity hacks (yes, I call them hacks)

March 19th, 2007, 8:17 pm

The container with a partially transparent PNG background looks like a good way to go if you ask me.
Touching that container elements opacity is going to cascade to the child elements though.

March 19th, 2007, 8:32 pm

joebert wrote:

Touching that container elements opacity is going to cascade to the child elements though.

That's what I was afraid of.

What about....say we set #transborder to, eh, 50% opacity, then we add stuff to #content that specifies a 100% opacity. Would that be 100% of the 50%, or 100% of normal?

I've never worked with CSS opacity, if you haven't noticed XD

March 19th, 2007, 11:40 pm

Should become 100% = 50% opacity, due to inheritance, which cannot be overridden using 2 or 200% since any vals over 1 or 100% (by browser) are invalid