lo-ga-rie words, lines .. life

pure CSS semi transparent backgrounds

A sweet tip I got from one of my collegues: Creating semi transparent backgrounds without using extra HTML:
If you add an alpha channel to an element all child elements inherit the alpha channel so black texts won't be black after applying the style. We can fix this by adding a an extra element to the dom and position it behind the element we want to style and give that an alpha channel but ... we can make this work without any extra elements as well and here's how!

html:

<div class='semi'><p>This site is awesome!</p></div>

css:

.semi {
  background-color: rgba(0,0,255,0.5);
}

This works great except for our beloved Internet Explorers below version 9 so let's add the magic:

ie8 and below css:

.semi {
  background: transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0000ff50,endColorstr=#0000ff50);
}

Yes you add it as a gradient filter! from starting color #0000ff at 0.5 opacity to #0000ff at 0.5 opacity