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…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

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 universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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 a solid color version…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Yes, it’s possible to create a simple and nice 3D layout playing with some CSS3 stuff, only using code and without the help of Photoshop. We want to make 3D elements without images. There are some properties of the CSS3 languages that can help us to accomplish this mission. We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds…

VN:F [1.9.22_1171]
Rating: +4 (from 4 votes)

Shadows and CSS3

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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 of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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 the latest versions of all major browsers except IE. If the alpha transparency is 50% or greater IE will revert to the solid rgb color specified, otherwise it will revert to full transparency. I recently came across a little trick that uses the IE proprietary gradient filter which supports alpha channel colors. If you simply set both shades of the gradient to the same color you can achieve the same effect as the CSS RGBA attribute…

VN:F [1.9.22_1171]
Rating: -2 (from 2 votes)