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.
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.
<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> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@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;} |