Question

http://pupunzi.com/
How do they use opacity for menu& Why text can change opacity without changing menu-background opacity?

Answer 1

Below is the style they use, as you can see the rgba color space which accepts arguments of red, green, blue and alpha, where alpha is the transparency channel.

#navigation #menu {
    position: absolute;
    top: 0;
    left: 5px;
    padding: 35px;
/*padding-top: 50px;*/
    border-left: 1px solid rgba(255, 255, 255, 0.9);

    background: rgba(255, 255, 255, 0.3);

/* IE10 */
    background: -ms-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Mozilla Firefox */
    background: -moz-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Opera */
    background: -o-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(radial, left top, 0, left top, 1017, color-stop(0, rgba(255, 255, 255, 0.9)), color-stop(.75, rgba(38, 150, 165, 0.1)));
/* Webkit (Chrome 11+) */
    background: -webkit-radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);
/* Proposed W3C Markup */
    background: radial-gradient(left top, circle farthest-corner, rgba(255, 255, 255, 0.9) 0%, rgba(38, 150, 165, 0.1) 75%);

    width: 100%;
    height: 100%;
    -moz-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
    -o-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);
    box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4);

}