Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
One element CSS ribbon
/*=============================================
=One element CSS ribbon (Need browser prefixes!!!!) =
=============================================*/
/**
*
* <!-- Lets make a cool single element ribbon -->
<h1>Single Element - Pure CSS3 </h1>
http://thecodeplayer.com/walkthrough/single-element-pure-css3-double-fold-ribbon
*
**/
h1 {
display: inline-block;
position: relative;
margin: 120px 0;
padding: 14px 30px;
text-shadow: 0 0 1px #758890;
text-transform: uppercase;
font-family: arial,verdana;
font-size: 14px;
line-height: 28px;
outline: none;
color: #8699A0;
/*Finally another shadow to negate some aspects of the :after element to complete the effect. This drops a shrinked shadow over the :after element with the same color like that of the background. The shadow is shrinked by the same offset amount = 18. And it is moved down by twice the offset amount to cover the entire height of the :after element*/
box-shadow: 0 0 30px 0 rgba(0,0,0,0.1) ,0 36px 0 -18px #B1E3E2;
}
/*The ribbon ends*/
h1:before {
content: '';
z-index: -1;
position: absolute;
top: 18px;
left: -15%;
width: 130%;
height: 0;
border: 28px solid rgba(0,0,0,0);
border-right: 28px solid #B1E3E2;
border-left: 28px solid #B1E3E2;
}
/*The after pseudo element will negatve the bottom part of the ribbon completing the effect*/
h1:after {
content: '';
z-index: -1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0;
border-top: 18px solid #99acb2;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
}
h1,
h1:before {
background-image: /*2 grey borders*/
linear-gradient(transparent 8%,rgba(0,0,0,0.1) 8%,rgba(0,0,0,0.1) 14%,transparent 14%,transparent 86%,rgba(0,0,0,0.1) 86%,rgba(0,0,0,0.1) 92%,transparent 92%),/*white gloss gradient*/
linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0) ),/*thin stripes*/
linear-gradient(45deg,transparent 40%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.1) 60%,transparent 60%),/*white base*/
linear-gradient(white,white);
background-size: cover,/*borders*/
cover,/*white gloss*/
4px 4px,/*thin stripes*/
cover;
}
h1,
h1:before,
h1:after {
box-sizing: border-box;
background-origin: border-box;
}
/*----- End of One element CSS ribon ------*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment