Semi-transparent colors with HSLA

Mosaic of coloured squares using HSLA to get semi-transparent colors

by caos30

HTML

<div id="mosaic">
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
    <div></div><div></div>
  </div>

CSS

#mosaic {position:relative;}
#mosaic div {position:absolute; display:block;width:120px;height:120px;}
#mosaic div:nth-child(1){top:50px; left:0px; background-color:hsla(0turn,100%,50%,0.5);}
#mosaic div:nth-child(2){top:170px; left:300px; background-color:hsla(0.1turn,100%,50%,0.5);}
#mosaic div:nth-child(3){top:220px; left:150px; background-color:hsla(0.2turn,100%,50%,0.5);}
#mosaic div:nth-child(4){top:0px; left:290px; background-color:hsla(0.3turn,100%,50%,0.5);}
#mosaic div:nth-child(5){top:250px; left:40px; background-color:hsla(0.4turn,100%,50%,0.5);}
#mosaic div:nth-child(6){top:10px; left:90px; background-color:hsla(0.5turn,100%,50%,0.5);}
#mosaic div:nth-child(7){top:240px; left:170px; background-color:hsla(0.6turn,100%,50%,0.5);}
#mosaic div:nth-child(8){top:180px; left:240px; background-color:hsla(0.7turn,100%,50%,0.5);}
#mosaic div:nth-child(9){top:90px; left:200px; background-color:hsla(0.8turn,100%,50%,0.5);}
#mosaic div:nth-child(10){top:150px;left:90px; background-color:hsla(0.9turn,100%,50%,0.5);}