Background Color Transparency with RGBa

Using RGBa to set your background colour of HTML elements is great as it allows you to use transparency.

It looks like this:

element {background-color: rgba(255,255,255,.15);}

Super neat for rollover effects where you can set the background colour to white on the rollover state with a low transparency, in this case 0.15. This has the effect of tinting the colour underneath, and makes it easy for colour scheme changes later on.

Transparent elements look cool but in the past you have either had to set the whole div to be transparent and also effecting any text inside it, or upload transparent background images.

NB Using rgba is CSS3 and works only in the latest browsers at the moment. That is IE9, Safari 3, Firefox 3 and any version of Google Chrome. Worth setting a few fallback states.


TIP – Position Nav Under Content

When viewing a webpage app or responsive design on our mobile device it is common to see full width navigation buttons placed under the content. This gives priority to the page content in the smaller screen. You can then easily scroll to the bottom to navigate further. This of course wouldn’t be practical for a very large scrolling page for many sites it is ideal.