3d Ribbon and Stitched effect

Advertisements

  Top Tutorials     New Tutorials     Submit     Login     Register  

Tutorial Detail

3d Ribbon and Stitched effect

I was just trying to create a stitched effect using CSS3. But I also added ribbon effect to it
http://techisquest.blogspot.in/2013/09/css-3d-ribbons-and-stitched-effect.html
  • Total Hits: 9856

  • Average Rating :
    URL RatingURL RatingURL RatingURL RatingURL Rating

  •  

  • Total Votes: 145 votes

  • Category: CSS/Advanced

  • Submitted on: 2013-09-21 05:21:52

  • Submitted By: Avdhut

  • Set as Favorite

Description:


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"> </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:






    More detail...

Rating Detail

 Stars  Percentage  Total Vote
 One star  Vote LeftVote MiddleVote Right 37.93%  55
 Two starsTwo star  Vote LeftVote MiddleVote Right 10.34%  15
 Three starsThree starsThree stars  Vote LeftVote MiddleVote Right 12.41%  18
 Four starsFour starsFour starsFour stars  Vote LeftVote MiddleVote Right 11.03%  16
 Five starsFive starsFive starsFive starsFive stars  Vote LeftVote MiddleVote Right 28.28%  41

Caste Your Vote

 Rating  Selection  Guidelines
 Poor:     Very disappointing, useless.
 Fair:     Below average, disappointing but not useless.
 Good:     About average in its class.
 Very Good:     Above average for its category.
 Excellent:     One of the best Tutorials in its category.





Advertisements
Advertisements