ChilisApps
Awesome Apps
  • Home
  • Blog
  • Apps
    • Math Attack
    • Android Clock Widget
    • Meme Maker
    • Sketchee Plus
    • Stock Wallpapers
    • Love Critters
    • Slice
    • Quick Connect
    • Word Hound
  • Contact
  • About Us
Select Page ...

Blog

RGBa colors in CSS

Ben November 25, 2012 CSS 2 Comments

Super easy and super useful. We’re talking about RGBa color values in CSS. They give you the ability to create great designs without having to use images. Instead of specifying color values in hex we can use the RGB value and also specify an alpha channel value.

An example of the RGBa syntax is as follows:

.modal_background {
    background: rgba(0, 0, 0, 0.5);
}

The first three values are the colors and the last is the alpha value. Its on a scale of 0-1 and accepts decimals such as 0.5 or 0.55.

Browser Support:

Blackberry: BBOS 6+
Android: 2.1 +
iOS: 3.2 +
IE: 9+
Other Desktop: Everything

As you can see almost any current browser with the exception of IE supports RGBa color values. This means we can use them without worrying about compatibility.

Here’s a little preview of some of the things you can do!

Dark

Lighter

Even Lighter

Heres the code for the examples above:

.dark{
    background: rgba(0, 0, 0, 0.75);
}
.lighter{
    background: rgba(0, 0, 0, 0.5);
}
. lighest {
    background: rgba(0, 0, 0, 0.25);
}

Add a comment if you have questions!

  • Tweet
  • Vote on HN
← Is my Android app running on a Playbook/BB10 device?
CSS text-overflow issues on Android →
Ben

I've been developing for over 8 years now and spend most of my time working on mobile applications. Mobile is my passion but I do end up working on various websites and custom application servers from time to time.

2 Responses to RGBa colors in CSS

  • Amedar Consulting
    11 / 28 / 2012

    I don’t usually comment but I gotta say thanks for the post on this great one :D.

    Amedar Consulting 11 / 28 / 2012
    Reply
  • Fabio
    12 / 3 / 2012

    I didn’t mean you need to add classes to the elmtenes, you should be able to pick out your elmtenes any other way, the classes I provided were to show where/how to use the styles. How about:p{ border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(0,0,0,0.2); padding:1.5em 0;}p:first-child{ border-top:none; padding-top:0;}p:last-child{ border-bottom:none; padding-bottom:0;}which would add your separators, with no extra markup, to your demo.

    Fabio 12 / 3 / 2012
    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Recent Posts

    • CSS text-overflow issues on Android
    • RGBa colors in CSS
    • Is my Android app running on a Playbook/BB10 device?
    • The right way to launch other apps
    • Android Holo themes with backwards compatibility
  • Our Tweets!

    Follow @ChilisApps

          • Apps
          • Blog
          • About Us
          • Contact
          Copyright © 2012 BPC Technologies Inc. All Rights Reserved