Pure CSS ribbon effect

30 August 2011

Another great effect of Joshua Hibbert. A pure CSS ribbon menu. Awesome!



You can try a version yourself on jsfiddle.

And the cleaned-up CSS code:

body {
    background: #a6a6a6;
    color: #111;
    font-size: 100%;
    padding: 150px 50px;
}
.ribbon-start, .ribbon, .ribbon-end {
    background-color: #e02c2c;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%,
        from(transparent), color-stop(0.25, transparent),
        color-stop(0.25, hsla(0,0%,0%,.15)), color-stop(0.50, hsla(0,0%,0%,.15)),
        color-stop(0.50, transparent), color-stop(0.75, transparent),
        color-stop(0.75, hsla(0,0%,0%,.15)), to(hsla(0,0%,0%,.15)));
    background-image: -webkit-linear-gradient(right top,
        transparent 0%, transparent 25%,
        hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
    background-image:
        -moz-linear-gradient(left bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
    background-image:
        -ms-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
    background-image:
        -o-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
    background-image:
        linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,0%,.15) 25%, hsla(0,0%,0%,.15) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,0%,.15) 75%, hsla(0,0%,0%,.15) 100%);
    -webkit-background-size: 3px 3px;
       -moz-background-size: 3px 3px;
        -ms-background-size: 3px 3px;
         -o-background-size: 3px 3px;
            background-size: 3px 3px;
}
.ribbon-start, .ribbon, .ribbon-end {
    height: 50px;
    float: left;
    position: relative;
    width: 75px;
}
.ribbon-start, .ribbon-end {
    overflow: hidden;
}
.ribbon-start {
    -webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        17px 1px 2px hsla(0,0%,0%,.4);
       -moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        17px 1px 2px hsla(0,0%,0%,.4);
            box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        17px 1px 2px hsla(0,0%,0%,.25);
}
.ribbon-end {
    -webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        -17px 1px 2px hsla(0,0%,0%,.4);
       -moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        -17px 1px 2px hsla(0,0%,0%,.4);
            box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        -17px 1px 2px hsla(0,0%,0%,.25);
}
.ribbon {
    margin: 0 -20px;
    top: -10px;
    width: 400px;
    z-index: 10;
    -webkit-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        0 2px 5px hsla(0,0%,0%,.4);
       -moz-box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        0 2px 5px hsla(0,0%,0%,.4);
            box-shadow: inset 0 -25px 25px hsla(0,0%,0%,.2),
                        inset 0 0 0 2px hsla(0,0%,100%,.25),
                        inset 0 0 0 1px hsla(0,0%,0%,.75),
                        0 2px 5px hsla(0,0%,0%,.25);
}
.ribbon:after, .ribbon:before {
    border-top: 5px solid hsla(0,0%,0%,.5);
    bottom: -5px;
    content: '';
    height: 0;
    position: absolute;
    width: 0;
}
.ribbon:after {
    border-left: 10px solid transparent;
    left: 0;
}
.ribbon:before {
    border-right: 10px solid transparent;
    right: 0;
}
.ribbon-start:after, .ribbon-start:before, .ribbon-end:after, .ribbon-end:before {
    content: '';
    height: 50px;
    position: absolute;
    top: 0;
    width: 50px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.ribbon-start:after, .ribbon-end:after {
    background: #a6a6a6;
}
.ribbon-start:after {
    left: -20px;
}
.ribbon-end:after {
    right: -20px;
}
.ribbon-start:before, .ribbon-end:before {
    background: hsla(0,0%,0%,.5);
}
.ribbon-start:before {
    left: -19px;
}
.ribbon-end:before {
    right: -19px;
}
.ribbon ul, .ribbon li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ribbon a {
    color: #f6f6f6;
    display: block;
    float: left;
    font: 1em/48px georgia, serif;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,0%,.25);
    width: 100px;
}
.ribbon a:hover, .ribbon a:focus {
    text-shadow: 0 1px 1px hsla(0,0%,0%,.25),
                 0 0 5px hsla(0,0%,100%,.5);
}
.ribbon a:active {
    position: relative;
    top: 1px;
}
.content {
    background: #f6f6f6;
    margin: -50px 65px;
    padding: 100px 20px 20px;
    position: relative;
    width: 340px;
    z-index: 5;
    -webkit-box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
                        inset 0 0 50px hsla(0,0%,0%,.2),
                        0 2px 5px hsla(0,0%,0%,.25);
       -moz-box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
                        inset 0 0 50px hsla(0,0%,0%,.2),
                        0 2px 5px hsla(0,0%,0%,.25);
            box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.5),
                        inset 0 0 50px hsla(0,0%,0%,.2),
                        0 2px 5px hsla(0,0%,0%,.25);
}

And the HTML part:

<div class="ribbon-start"></div>
<div class="ribbon">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
<div class="ribbon-end"></div>
<div class="content">
    <h1>Title</h1>
    <h2>Sub Title</h2>
    <p>BLABLABLA CONTENT</p>
</div>‚Äč
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Raihanul Haq

    08 June 2014

    It is a powerful tool.
    Thanks.....................

  2. Gravatar

    Cahboy

    03 January 2013

    Yay I will Try this
    Thank's :)

  3. Gravatar

    ys0

    01 April 2012

    hi, if you have the html part, send it to yoshi00mail [at] gmail.com please :)