Menu
I'm working on a website that has a lot of transparency involved, and I thought I would try to build it entirely in RGBA and then do fallbacks for IE. I need a "facebox" style border effect, where the outer border is rounded and is less opaque than the background of the box it surrounds.
The last example from http://24ways.org/2009/working-with-rgba-colour seems to suggest that it's possible, but I can't seem to get it to work. When I try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>RGBA Test</title> <style type='text/css'> body { background: #000; color: #fff; } #container { width: 700px; margin: 0 auto; background: rgba(255, 255, 255, 0.2); border: 10px solid rgba(255, 255, 255, 0.1); padding: 20px; } </style> </head> <body> <div id='container'> This should look like a facebox. </div> </body></html> It seems like the background "extends" underneath the border of the element, which causes the pixel values to get added together. Thus, when both the background and the border are semi-transparent, the border will ALWAYS be more opaque than the background of the element. This is exactly the opposite of what I am trying to achieve, but it seems like it should be possible based on the examples I've seen.
I should also add that I can't use another element inside the container, because I'm also going to use a border-radius on the container to get rounded corners, and webkit squares the corners of the child elements if they have a background assigned, which would essentially mean a rounded outer border with square contents.
Sorry I can't post an image of this... Apparently I don't have enough rep to post an image.
366
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). rgba(255, 0, 0, 0.2);
border: 5px solid rgba(255, 255, 255, . 5); Here, a means alpha, which you can scale, 0-1. Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity .
You can use the new background-clip: padding-box; property to get this going. It calculates where from should the background start within a box. For more details and examples, check here
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
