Realistic CSS ribbon

In this example below you will see how to do a Realistic CSS ribbon with some HTML / CSS and Javascript

Cinta realista hecha con CSS

Thumbnail
This awesome code was written by oloman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oloman ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Realistic CSS ribbon</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .contcinta {
position:relative;
margin:0 auto;
margin-bottom: 70px;
width:150px;
height:250px;
}
.contcinta::before {
position: absolute; 
top:60px;
left: 147px;
display: block;
width: 3px;
height: 228px;
box-shadow: 1px 5px 10px 3px black;
content: "";
}
.barra {
position: absolute;
top: 1px;
left: -225px;
display: block;
margin: 0 auto;
width: 600px;
height: 70px;
border-radius:30px;
background: #1d262b;
background: linear-gradient(to bottom, #1d262b 0%,#565d60 57%,#757a7f 74%,#28343b 100%);
box-shadow: 5px 1px 5px #333;
}
.cintaver {
position:relative;
width:150px;
height:150px;
background: #9a0808; 
background: linear-gradient(to bottom, #9e0b0b 0%,#bf3624 3%,#9a0808 13%,#9a0808 18%,#c43b29 60%,#bc2e1e 74%,#9a0808 100%,#9a0808 100%);
}
.cintaver:before {
position:relative;
top:150px;
display:block;
width:0;
height:0;
border-width: 75px;
border-style:solid;
border-color:#9A0808 #9A0808 transparent #9A0808;
content:"";
}
.cintaver:after {
position:absolute;
top: 0;
left: 8px;
padding: 40px 0 0 0;
width: 130px;
height:250px;  
border-right: 2px dashed #cc3D29;
border-left: 2px dashed #cc3D29;  
color:#880000;         
content: "OLO BLOGGER";  
text-align:center;
text-shadow: 1px 0px  #cc3d29;
font:normal bold 24px/26px arial, serif;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="contcinta">
  <div class="barra"></div>
  <div class="cintaver"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/oloman/realistic-css-ribbon-aAqzj */
.contcinta {
position:relative;
margin:0 auto;
margin-bottom: 70px;
width:150px;
height:250px;
}
.contcinta::before {
position: absolute; 
top:60px;
left: 147px;
display: block;
width: 3px;
height: 228px;
box-shadow: 1px 5px 10px 3px black;
content: "";
}
.barra {
position: absolute;
top: 1px;
left: -225px;
display: block;
margin: 0 auto;
width: 600px;
height: 70px;
border-radius:30px;
background: #1d262b;
background: linear-gradient(to bottom, #1d262b 0%,#565d60 57%,#757a7f 74%,#28343b 100%);
box-shadow: 5px 1px 5px #333;
}
.cintaver {
position:relative;
width:150px;
height:150px;
background: #9a0808; 
background: linear-gradient(to bottom, #9e0b0b 0%,#bf3624 3%,#9a0808 13%,#9a0808 18%,#c43b29 60%,#bc2e1e 74%,#9a0808 100%,#9a0808 100%);
}
.cintaver:before {
position:relative;
top:150px;
display:block;
width:0;
height:0;
border-width: 75px;
border-style:solid;
border-color:#9A0808 #9A0808 transparent #9A0808;
content:"";
}
.cintaver:after {
position:absolute;
top: 0;
left: 8px;
padding: 40px 0 0 0;
width: 130px;
height:250px;  
border-right: 2px dashed #cc3D29;
border-left: 2px dashed #cc3D29;  
color:#880000;         
content: "OLO BLOGGER";  
text-align:center;
text-shadow: 1px 0px  #cc3d29;
font:normal bold 24px/26px arial, serif;
}

Comments