3d Ribbon and Stitched effect

Tutorials Shared by the Internet Community

Advertisements


3d Ribbon and Stitched effect

I was just trying to create a stitched effect using CSS3. But I also added ribbon effect to it

Statistics

  • Total Hits - 33755

  • Total Votes - 120 votes

  • Vote Up - 55 votes

  • Vote Down - 65 votes

  • Domain - techisquest.blogspot.in

  • Category - CSS/Advanced

  • Submitted By - Avdhut

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

Description

<div dir="ltr" style="text-align: left;" trbidi="on"><br />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<br /><br /><br /><br />1. Stitch Effect<br /><br />2. 3D Ribbon Effect<br /><br /><br /><br />&amp;nbsp; Following is the HTML used for creating&amp;nbsp;<span style="background-color: white;">effects</span>:<br /><br /><br /><br /><pre style="-webkit-font-smoothing: antialiased; background-color: #6fa8dc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: Monaco, sans-serif; font-size: 11px; margin-bottom: 20px; overflow: hidden; padding: 10px; text-rendering: optimizelegibility; word-wrap: break-word;"><code data-language="html" style="-webkit-font-smoothing: antialiased; font-family: Monaco, courier, monospace; text-rendering: optimizelegibility;">&amp;lt;div&amp;gt;<br /> &amp;lt;div class="stitched"&amp;gt;&amp;amp;nbsp;&amp;lt;/div&amp;gt;<br />&amp;lt;/div&amp;gt;</code></pre><br /><br /><br />There is one class used in above HTML &amp;nbsp;"stitched".<br /><br /><br /><br />1. stitch Effect:<br /><br /><br /><br />&amp;nbsp; Stitch effect can be created using CSS box-shadow and border style.<br /><br />&amp;nbsp; &amp;nbsp;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.<br /><br /><br /><br /><pre style="-webkit-font-smoothing: antialiased; background-color: #6fa8dc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; margin-bottom: 20px; overflow: hidden; padding: 10px; text-rendering: optimizelegibility; word-wrap: break-word;"><span style="color: white; font-family: Monaco, courier, monospace;"><span style="font-size: 11px;">.stitched {<br />position: relative;<br /> border:2px dashed #fff;<br /> background: #ff0030;<br /> width: 356px;<br /> height: 40px;<br /> margin: 30px 10px 10px 20px;<br /> line-height: 120px;<br /> text-align: center;</span></span><span style="color: white; font-family: Monaco, courier, monospace; font-size: 11px;"> /*The box shadow x=0 y=0 blur=0 and the spread radius is 8px*/ box-shadow: 0 0 0 8px #ff0030;</span><span style="color: white; font-family: Monaco, courier, monospace;"><span style="font-size: 11px;"><br /></span></span><span style="color: white; font-family: Monaco, courier, monospace;"><span style="font-size: 11px;"> -moz-box-shadow: 0 0 0 8px #ff0030;<br /> -webkit-box-shadow: 0 0 0 8px #ff0030;<br /> z-index: 10;<br />}</span></span><span style="color: white; font-family: Monaco, sans-serif; font-size: 11px;"><br /></span></pre><br /><br /><br />Following is the effect created using the above class:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://3.bp.blogspot.com/-ofmtld-nUS8/Uj1a2xXV8_I/AAAAAAAAALg/zY-as7GrZ2w/s1600/stitched_effect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="62" src="http://3.bp.blogspot.com/-ofmtld-nUS8/Uj1a2xXV8_I/AAAAAAAAALg/zY-as7GrZ2w/s400/stitched_effect.png" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><br /></div><br />2. Ribbon Effect:<br /><br />&amp;nbsp; &amp;nbsp; &amp;nbsp; <br /><br />&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;Ribbon effect can be created using <b>:after </b>and <b>:before </b>pseudo elements.<br /><br />Following is the arrow created using :after class:<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://3.bp.blogspot.com/-7sXUHF3By9M/Uj1mNVjSBOI/AAAAAAAAAMY/agyAytxunpA/s1600/after_arrow_stitched.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-7sXUHF3By9M/Uj1mNVjSBOI/AAAAAAAAAMY/agyAytxunpA/s1600/after_arrow_stitched.png" /></a></div><br /><br /><br />Following is the class used to create the arrow shown in the above image.<br /><br /><br /><br /><pre style="-webkit-font-smoothing: antialiased; background-color: #6fa8dc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; margin-bottom: 20px; overflow: hidden; padding: 10px; text-rendering: optimizelegibility; word-wrap: break-word;"><span style="color: white; font-family: Monaco, courier, monospace;"><span style="font-size: 11px;">.stitched:after {<br /> content:"";<br /> position:absolute;<br /> border-bottom:14px solid transparent;<br /> border-right:0px solid transparent;<br /> border-left:14px solid transparent;<br /> border-top:14px solid #99001D;<br /> margin-top:49px;<br /> left: -9px;<br /> background: transparent;<br /> z-index: -1;<br />}<br /></span></span><span style="color: white; font-family: Monaco, sans-serif;"><span style="font-size: 11px;"><br /></span></span></pre><br /><br /><br /><br /><br /><br /><br />Following is the arrow created using :before class:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://1.bp.blogspot.com/-0tNLBK_YRUY/Uj1eXxekmnI/AAAAAAAAAL4/O1TFEqnt9sQ/s1600/before_arrow_stitched.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-0tNLBK_YRUY/Uj1eXxekmnI/AAAAAAAAAL4/O1TFEqnt9sQ/s1600/before_arrow_stitched.png" /></a></div><br /><br /><br />Following is the class used to create the arrow shown in the above image.<br /><br /><br /><br /><pre style="-webkit-font-smoothing: antialiased; background-color: #6fa8dc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; margin-bottom: 20px; overflow: hidden; padding: 10px; text-rendering: optimizelegibility; word-wrap: break-word;"><span style="color: white;"><span style="font-family: Monaco, courier, monospace;"><span style="font-size: 11px;">.stitched:before {<br /> content:"";<br /> position:absolute;<br /> border-bottom:14px solid transparent;<br /> border-right:14px solid transparent;<br /> border-left:0px solid transparent;<br /> border-top:14px solid #99001D;<br /> margin-top:49px;<br /> right: -9px;<br /> z-index: -1;<br />}<br /></span></span><span style="font-family: Monaco, sans-serif;"><span style="font-size: 11px;"><br /></span></span></span></pre><br />Following is the final effect created using <b>.stitched , .stitched:after and .stitched:before</b>.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://4.bp.blogspot.com/-NbFuYxjsqrQ/Uj1kqGFSwQI/AAAAAAAAAMM/lVIn4rFdBAk/s1600/stitched_effect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="67" src="http://4.bp.blogspot.com/-NbFuYxjsqrQ/Uj1kqGFSwQI/AAAAAAAAAMM/lVIn4rFdBAk/s320/stitched_effect.png" width="320" /></a></div><br /><br /><br />Following is the Final code for the Stitched ribbon:<br /><br /><br /><br /><iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/avdhut/Hrgph/embedded/result,css,html" width="100%"></iframe><br /><br /><br /><br /><br /><br />Following is another example for ribbon with stitched effect:<br /><br /><br /><br /><br /><br /><iframe allowfullscreen="allowfullscreen" frameborder="0" height="450" src="http://jsfiddle.net/avdhut/e7LWA/embedded/result,css,html" width="100%"></iframe><br /></div>    More detail...


Broken  |   Tweet  |   Facebook  |     |   Save  |   Liked  |   Down

Advertisements