Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:ribbon

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

development:css:ribbon [2017/12/12 10:02] (current)
tplecko created
Line 1: Line 1:
 +====== Corner ribbon (crossbrowser) ======
 +Code for drawing ​ a ribbon in the div corner.
  
 +HTML:
 +<code html>
 +<div class="​wrapper"><​br />
 +<div class="​ribbon-wrapper-green">​
 +<div class="​ribbon-green">​NEWS</​div>​
 +</​div>​
 +</​div>​
 +</​code>​
 +CSS:
 +<code css>
 +.wrapper {
 +margin: 50px auto;
 +width: 280px;
 +height: 370px;
 +background: white;
 +border-radius:​ 10px;
 +-webkit-box-shadow:​ 0px 0px 8px rgba(0,​0,​0,​0.3);​
 +-moz-box-shadow:​ 0px 0px 8px rgba(0,​0,​0,​0.3);​
 +box-shadow: 0px 0px 8px rgba(0,​0,​0,​0.3);​
 +position: relative;
 +z-index: 90;
 +}
 +
 +.ribbon-wrapper-green {
 +width: 85px;
 +height: 88px;
 +overflow: hidden;
 +position: absolute;
 +top: -3px;
 +right: -3px;
 +}
 +
 +.ribbon-green {
 +font: bold 15px Sans-Serif;
 +color: #333;
 +text-align: center;
 +text-shadow:​ rgba(255,​255,​255,​0.5) 0px 1px 0px;
 +-webkit-transform:​ rotate(45deg);​
 +-moz-transform:​ rotate(45deg);​
 +-ms-transform:​ rotate(45deg);​
 +-o-transform:​ rotate(45deg);​
 +position: relative;
 +padding: 7px 0;
 +left: -5px;
 +top: 15px;
 +width: 120px;
 +background-color:​ #BFDC7A;
 +background-image:​ -webkit-gradient(linear,​ left top, left bottom, from(#​BFDC7A),​ to(#​8EBF45)); ​
 +background-image:​ -webkit-linear-gradient(top,​ #BFDC7A, #​8EBF45); ​
 +background-image:​ -moz-linear-gradient(top,​ #BFDC7A, #​8EBF45); ​
 +background-image:​ -ms-linear-gradient(top,​ #BFDC7A, #​8EBF45); ​
 +background-image:​ -o-linear-gradient(top,​ #BFDC7A, #​8EBF45); ​
 +color: #6a6340;
 +-webkit-box-shadow:​ 0px 0px 3px rgba(0,​0,​0,​0.3);​
 +-moz-box-shadow:​ 0px 0px 3px rgba(0,​0,​0,​0.3);​
 +box-shadow: 0px 0px 3px rgba(0,​0,​0,​0.3);​
 +}
 +
 +.ribbon-green:​before,​ .ribbon-green:​after {
 +content: "";​
 +border-top: 3px solid #​6e8900; ​
 +border-left:​ 3px solid transparent;​
 +border-right:​ 3px solid transparent;​
 +position:​absolute;​
 +bottom: -3px;
 +}
 +
 +.ribbon-green:​before {
 +left: 0;
 +}
 +.ribbon-green:​after {
 +right: 0;
 +}​
 +</​code>​
development/css/ribbon.txt · Last modified: 2017/12/12 10:02 by tplecko