Corner Ribbons

Corner Ribbons.markdown

Corner Ribbons

Got this wonderful idea of these cool corner ribbons and decided to make it ready for use. Custom styles like colors work with simple class changes.

Forked from Miro Karilahti's Pen Corner Ribbons.

A Pen by Eode9 on CodePen.

License.

index.html

<div class="corner-ribbon top-left sticky red shadow">Hello</div>
<div class="corner-ribbon top-right sticky blue">Hello</div>
<div class="corner-ribbon bottom-left sticky orange">Hello</div>
<div class="corner-ribbon bottom-right sticky green shadow">Hello</div>

<h1>Corner Ribbons</h1>
<h2>(with custom settings and all...)</h2>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url('http://fonts.googleapis.com/css?family=Noto+Sans:400,700');

*{
  margin: 0;
  padding: 0;
}

body{
  background: #f0f0f0;
  font-family: 'Noto Sans', sans-serif;
}

h1{
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -275px;
  font-size: 3.2em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 100px;
  color: #aaa;
}

h2{
  width: 500px;
  height: 100px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0 0 0 -225px;
  font-size: 1.6em;
  font-weight: 400;
  text-align: center;
  line-height: 100%;
  color: #bbb;
}

/* The ribbons */

.corner-ribbon{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: -50px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -50px;
  bottom: 25px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}