CODEWITHSUNDEEP
cssheadertransparency
Andreas Litis
Andreas Litis

Reputation: 367

How to make a transparent-sticky header?

I want to try to code a fixed-header that is a bit transparent.

Any ideas, sample code, tutorials? I want to achieve it with CSS only, if possible. Playing with the opacity (CSS3) is needed, I guess.

Upvotes: 12

Views: 102798

Answers (3)

Mahozad
Mahozad

Reputation: 24602

You can also make a glassy (translucent) background using the new backdrop-filter property:

Example CSS backdrop blur filter

header {
  top: 0;
  position: sticky;
  background: transparent;
  backdrop-filter: blur(5px);
}


header {
  top: 0;
  position: sticky;
  background: transparent;
  backdrop-filter: blur(5px);
  padding: 24px;
  font-size: 24px;
  font-weight: bold;
}

p {
  width: 200px;
}
<header>This is a sticky header</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris magna elit, consectetur in ultricies nec, imperdiet sit amet turpis. Sed ligula eros, pellentesque ac ligula eu, mollis iaculis est. Donec tempus massa in libero consectetur, laoreet feugiat tortor rhoncus. Aliquam ac risus et risus finibus sodales. Suspendisse et ipsum mollis, convallis elit ac, interdum nibh. Etiam finibus odio urna, eu pretium arcu varius ut. Aliquam erat volutpat.
Duis volutpat mollis turpis, at posuere ipsum semper in. In in ligula tortor. Integer eget lorem nec ex ultricies molestie. Proin convallis sagittis orci nec tempus. Pellentesque luctus condimentum libero in fermentum. Mauris ornare sem nec tellus bibendum, eu interdum nisl mollis. Morbi et lectus sodales, blandit urna et, posuere metus. Praesent sodales eu tortor eu vestibulum. Mauris eu quam sit amet neque faucibus facilisis. Sed tincidunt enim egestas elit finibus, id tempor erat luctus. Ut sed faucibus ante. Suspendisse non lacus augue. Duis porta lorem sed enim lobortis, a malesuada leo scelerisque. Nam neque massa, tempus sit amet velit nec, tincidunt bibendum dui. Praesent neque tortor, blandit in nunc vehicula, suscipit fringilla turpis.
</p>

Upvotes: 0

Nathan
Nathan

Reputation: 12010

Example

Full screen jsFiddle: http://fiddle.jshell.net/NathanJohnson/LrNBt/show/

jsFiddle: http://jsfiddle.net/NathanJohnson/LrNBt/

Code

HTML:

<div id="header">
    <div id="header-content">
        <h1>Here is some heading text :)</h1>
        <p>Here is some more content of the header...</p>
    </div>
</div>

CSS:

body {
    font-family: arial, sans-serif;
    padding: 0;
    margin: 0;
}
#header {
    background-color: black;
    /*Opacity start*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    /*Opacity end*/
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
}
#header #header-content {
    margin: 10px;
}

Or, you could just use rgba() instead of opacity:

#header {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
}
#header #header-content {
    margin: 10px;
}

I hope this helps.

Upvotes: 15

StuR
StuR

Reputation: 12228

Use Firebug to analyze their code:

#header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 90;
    background: url("../images/bg-header.png") repeat-x scroll 0 0 transparent;
    height: 247px;
}

Instead of using an image use:

background: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

Upvotes: 2

Related Questions