Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

This new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, Opera and Apple Safari and the Microsoft-proprietary DXImage gradient filters for Internet Explorer and may give you some new design ideas. Make sure you check the test page which I have created for this article…

CSS Opacity: A Comprehensive Reference

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a […]

IE Background RGB Bug

Using RGBa for progressive enhancement is getting more and more popular, which is awesome. Even nearly a year ago it was pretty much ready to rock. A great way to handle the progressive enhancement part is just to declare a fallback color before the RGBa value, so older browsers that don’t support it will get […]

Working With RGBA Colour

We’re all familiar with specifying colours in CSS using by defining the mix of red, green and blue light required to achieve our tone. This is fine and dandy, but whatever values we specify have one thing in common – the colours are all solid, flat, and well, a bit boring. CSS3 introduces a couple […]

Enabling CSS RGBA Support in IE

One of the most frustrating things about working with newer CSS attributes is that while most modern browsers will support them in their latest versions, IE almost never keeps up. Such is the case with the RGBA color declaration which enables developers to specify an alpha transparency along with a color. This works great in […]

Simple Cross-Browser Transparency with CSS

Simple CSS code for Transparency setting for all browsers, IE, Firefox, Opera, Safari and Google Chrome…

CSS Opacity That Doesn’t Affect Child Elements

This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But it could come in handy in a rare case, depending […]

Pure CSS opacity and how to have opaque children

Opacity is a desirable thing in this day and age; especially with the design trends that typified the web2.0 movement. Here are two different methods of achieving CSS opacity. One where the children inherit the opacity, the other where content can have its own opacity level…

How to: Opacity with CSS

Do you know that an opacity or transparency can be applied to various aspects of a website without the use of Photoshop? Well you can with the use of CSS and even though there is not yet a CSS standard, the effect does work in all modern browsers and is easily achievable. Here are the […]

Understanding CSS Image Opacity / Transparency

Image transparency/opacity is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation. Here’s a nice clear tutorial that explains how to achieve cross-browser transparency. It’s easy to understand and there are some useful examples…