CSS 3D Ribbons and Stitched Effect

We can create various effect with CSS. We can add new design style to the menu by using ribbons created using CSS. This artciel explains about two effects created using CSS

1. Stitch Effect
2. 3D Ribbon Effect

  Following is the HTML used for creating effects:

<div>
    <div class="stitched">&nbsp;</div>
</div>

There is one class used in above HTML  "stitched".

1. stitch Effect:

  Stitch effect can be created using CSS box-shadow and border style.
   To get the stitched effect keep the border style to dashed and use the box-shadow with x=0 y=0 and blur to zero as well.

.stitched {
position: relative;
    border:2px dashed #fff;
    background: #ff0030;
    width: 356px;
    height: 40px;
    margin: 30px 10px 10px 20px;
    line-height: 120px;
    text-align: center;                                                                       /*The box shadow x=0 y=0 blur=0 and the spread radius is 8px*/                            box-shadow: 0 0 0 8px #ff0030;
    -moz-box-shadow: 0 0 0 8px #ff0030;
    -webkit-box-shadow: 0 0 0 8px #ff0030;
    z-index: 10;
}

Following is the effect created using the above class:

2. Ribbon Effect:
     
           Ribbon effect can be created using :after and :before pseudo elements.
Following is the arrow created using :after class:

Following is the class used to create the arrow shown in the above image.

.stitched:after {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:0px solid transparent;
    border-left:14px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    left: -9px;
    background: transparent;
    z-index: -1;
}

Following is the arrow created using :before class:

Following is the class used to create the arrow shown in the above image.

.stitched:before {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:14px solid transparent;
    border-left:0px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    right: -9px;
    z-index: -1;
}

Following is the final effect created using .stitched , .stitched:after and .stitched:before.

Following is the Final code for the Stitched ribbon:



Following is another example for ribbon with stitched effect: