Fancy transparencies with rgba

Written by Leon on . 11 comments. Filed under: Notes.

The little used rgba value makes it easy to create some impressive CSS transparency effects. But only for modern browsers, of course.

Transparency is not something I’ve used much in the past, probably because it traditionally involves messing around with images (which is not really my thing: I’m a textual type).

But CSS does allow authors to apply transparency to textual components, and I’ve recently discovered the rgba value. I like rgba because it doesn’t use any browser specific syntax, and it’s very logical.

What’s rgba?

Like the rgb value, three numbers are used to reference the red, green and blue elements of any given colour. rgba accepts an additonal value (the a, or alpha value) which determines how transparent the colour is on a scale of 0-1 (1 being opaque). So a black, half transparent colour would be set with rgba(0,0,0,0.5).

See what happens when the block is hovered over

This is not a picture of me

This value can be applied to any selector. Combined with the :hover pseudo class, authors can create some pretty effects without messing around with actual images.

How my example works

It’s basically a huge link with a background image. The default background color is normal, opaque yellow (hex FFD100), but the a:hover background value has been set to rgba(259,209,0,0.5) (i.e. the same yellow with 50% transparency). The additional text only changes to black when it’s hovered over: the default state is yellow.

Unfortunately, only Firefox and Safari accept the rgba value. You can make other browsers degrade gracefully by setting a traditional background colour  value  above the rgba value. Unsurprisingly, IE makes a pig’s ear of it by trying to do something, and failing. I therefore had to use a separate IE style sheet to get it working properly: overkill, perhaps, but it’s the only way I could get it to work.

What could you use it for?

Erm, I’m not sure. Surprise images aren’t great from a usability point of view, and it can be quite annoying accidentally making images appear as you mouse across the page. I quite like the idea of a blog front page where titles are displayed in this way. When the reader hovers over the title the image reveals itself, perhaps along with a summary of the post. I’d love to hear of any ideas you have, or any examples of it in the real world.

Comments

  1. inspirationbit says:
    March 6, 2009 at 3:51 pm

    haha, where did you dig out that photo? Looks like a Russian accordion player is entertaining ‘girls’ ;)

    on a more serious note, I’m quite impressed with the simplicity of its execution and the end result.

    If you remember on iBit’s new design initially I had three latest posts displayed twice: 1st row with 3 featured images, 2nd time (below the blog’s title) as text with just three post titles.
    It looked quite busy (and everyone has pointed it out to me), so I took the 1st row (with the images) out. Now I’m thinking that I could actually combine the two in one row, leave my 3 latest posts with text titles as they are there now, but on mouseover reveal the transparent backgrounds with the featured post images.
    What do you think?

    Of course, first I have to figure out how to dynamically display featured images as backgrounds (i guess I can do that using inline CSS), and then the fact that it doesn’t work in IE/Opera (just shows solid colour)

    Reply
    • Leon says:
      March 6, 2009 at 4:11 pm

      That’s a good call, Vivien—this is one of a bunch of fantastic Soviet–era photos I stumbled on years ago. I’ve taken them across laptops, but lost the original link. (On a complete sidenote, wasn’t Stalin Georgian? Anyway…)

      Your idea sounds good—why not try it on a test site? The problem I’ve got with the effect is that it looks good in isolation but it might annoy in the extreme on a real page.

      Oh, I’ve changed it a bit since your comment: it’s more obviously transparent now.

      I too like the simplicity. I’m sure it could be used with some creativity.

      Reply
      • inspirationbit says:
        March 6, 2009 at 4:25 pm

        oh, yes, that’s better now: I was wondering that it didn’t look all that transparent.
        Thanks, I’ll also try on a test site, will let you know when it’s up.

        Yes, you’re absolutely right: Stalin was Georgian. He was Lenin’s closest sidekick (and the most powerful one), so when Lenin came to power, Georgia was one of the first republics whom Stalin had ‘Sovetized’.

        Reply
        • Leon says:
          March 6, 2009 at 4:38 pm

          Yes, Stalin used to invoke Lenin’s name whenever he went on a purge. I think he even ended up denouncing Lenin as not being revolutionary enough.

          Would you have to use inline CSS? Maybe you could do something with a custom field to give each link its own class and assign each class its own background image. (That’s probably nonsense!)

          Reply
  2. Konstantin says:
    March 25, 2009 at 12:03 pm

    It works in Chrome as well. Very interesting. Is this an HTML5 attribute? I have never seen it before.

    Reply
  3. Matt Riches says:
    April 13, 2009 at 8:26 pm

    Hey,

    I too am impressed with the simplistic code that is required for such an action!

    Simple & efficient.

    I wouldn’t know a situation where I would use it but I have seen rather ghastly flash ‘animations’ and horribly large ‘roll over’ images that could be replaced with the code.

    If I find a placement to incorporate the code, I’ll let you know. Maybe buttons?

    Matt.

    Reply
  4. Leon says:
    April 15, 2009 at 6:02 pm

    Hi Matt,

    Yes, I can’t say that the hover effect has many practical uses, although I’m sure it can be used to some creative effect.

    Hope you and the business are keeping well.

    Reply
  5. duggi says:
    September 2, 2009 at 1:00 am

    i hope u figured out what its useful for by now … you can set the background of a container half transparent, and the text or anything else inside the container is still fully opaque. key use.

    Reply

Add a comment