CODEWITHSUNDEEP
htmlcsseffect
John Floyd
John Floyd

Reputation: 67

How to make a header bar fold over the webpage css

Can someone please tell me the CSS code or point me to a tutorial on how to achieve this effect see all the time. Here is a image of what I'm talking about:

enter image description here

Note: I know how to position with absolute I just need to know how they pull the effect off.

Upvotes: 7

Views: 1984

Answers (2)

Sampson
Sampson

Reputation: 268324

This could be positioned relatively, or absolutely - it could be done either way:

#item {
    position: relative;
    right: -10px; /* moves it 10px to the right */
}

Or absolutely:

#item {
    position: absolute:
    top: 20px; /* 20px from the top */
    right: -20px; /* 20px off the right edge */
}

Note that absolutely positioned elements will be positioned according to the viewport if they have no positioned ancestors.

The folded portion can be accomplished using borders on the pseudo-element :before or :after.

Demo: http://jsfiddle.net/MaepP/2/

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

If the ribbon is the issue, then use borders on an empty (0-size) element (which you can add with :after pseudo-element)..

Html

<div id="content">
    <div id="ribbon"></div>
</div>

CSS

#content{
    background-color:#77c;
    width:300px;
    height:200px;
    position:relative;
}
#ribbon{
    position:absolute;
    width:80px;
    height:30px;
    right:-20px;
    top:50px;
    background-color:#999;
}
#ribbon:after{
    content:'';
    width:0;
    height:0;

    border-color: transparent transparent #666 #666;
    border-style:solid;
    border-width:5px 10px;

    position:absolute;
    right:0;
    top:-10px;
}

Demo at http://jsfiddle.net/gaby/zJPhy/

Upvotes: 6

Related Questions