Transparent color in header and contetn - Support | Kriesi.at

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

November 3, 2014 at 8:09 pm #345488

Hi guys

How do I make a transparency effect as here http://blackwaterus.com/ (both header and white content area under the image) :-)

Thanks in advance :-)

Martin

November 4, 2014 at 6:24 pm #345987

Elliott

Inactive Moderator

Hi mar10nlund!

This is the CSS he used to create that effect,

 #header {
    background-color: transparent;
    background-image: none, linear-gradient(to top, rgba(7, 15, 25, 0.75) 0px, rgba(7, 15, 25, 0.8) 10px, rgba(7, 15, 25, 0.86) 20px, rgba(7, 15, 25, 0.9) 30px, rgba(7, 15, 25, 0.94) 40px, rgba(7, 15, 25, 0.98) 50px, rgba(7, 15, 25, 0.99) 60px, #070f19 70px);
    background-position: center top;
    background-repeat: repeat;
    border-bottom: medium none;
    box-shadow: 0 1px 0 0 rgba(5, 38, 57, 0.05);
}
#main {
    background-image: none, linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0px, rgba(255, 255, 255, 0.8) 5px, rgba(255, 255, 255, 0.86) 10px, rgba(255, 255, 255, 0.9) 20px, rgba(255, 255, 255, 0.94) 30px, rgba(255, 255, 255, 0.98) 50px, rgba(255, 255, 255, 0.99) 60px, #ffffff 70px);
    background-position: center top;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: 0 -1px 0 0 rgba(5, 38, 57, 0.05);
}