You are reading...

CSS3: rgba

WebDev

February 27th

Wow, first webdev post in like, forever, must be because I mocked up a first draft of the new portfolio page.

CSS3 introduces the rgb and rgba background properties. Simply put, instead of hexes, colors can be determined by their rgb values.

This is background:rgb(0,0,0); , which is black.

That’s nothing special. rgba, however, combines background color and alpha value, or opacity.

This is background:rbga(0,0,0,.6); , which is black and 60% opacity.

Please note that rgba only specify a specific element, whereas opacity property define an element and its children. The latest Firefox and Webkit browsers support this, IE8 and below… not so much. It only supports rgb.

CSS Tricks has a whole list of browser support. This is a handy property that replaces the 1px translucent background image.

It's your turn to speak. Here's what you can do. Leave a response, or trackback from your own site.

Last at-bat:
On deck:
Go home
  • http://www.facebook.com/LyleArgabright Lyle Argabright

    What is the best browser to use? I’ve always used IE and it’s at 9 now. I think I can tell a very small difference, but being a Photoshop user 60% opacity should be pretty obvious. I’m just starting out and do you have any advice where I should start learning? I had started with HTML but the code looks so different than HTML5 or XML. Would it just be better to learn them all? The opening and closing of the codes is kind of tripping me up.

  • http://areyoudesign.com/blog Sai-Kit Hui

    For a developer, you’ll need to know the ins and outs of all major browsers. I would learn the latest Firefox/Chrome/Safari and IE9 and IE8.

    I’d start doing HTML5 since it is mostly backwards compatible.