Ribbon Tags LESS Mixin

index.html

<em>To SASS version see <a href="http://codepen.io/emilio/pen/mJrLKx" target="_blank">this pen</a></em>
<h2>LESS Example 1</h2>
<div class="my-frame">
  <div class="tag left-tag">
    Left Tag
  </div>
</div>

<div class="my-frame">
  <div class="tag right-tag">
    Right Tag
  </div>
</div>


<div class="row">
  <h2>More examples</h2>

  <div class="my-frame">
    <div class="tag ex2-right">
      Tag
    </div>
  </div>


  <div class="my-frame">
    <img src="http://aguaspatagonicas.com/m/styles/cuadrada/public/fotos/5136962437_b7c80ef639_o_0.jpg?" />
    <div class="tag ex2-left">
      tag
    </div>
  </div>
</div>

</div>

Ribbon Tags LESS Mixin.markdown

Ribbon Tags LESS Mixin

Pure CSS Left and Right Ribbon style Tags, whit the same mixin

A Pen by emilio on CodePen.

License.

style.css

/*
* Ribbon Tag Less Mixin
*/

/*
*  @bg: Background Color
*  @left: [boolean] define left or right position of tag
*  @s: Size, relative to font size, see examples   
*/

/** <-> Left To Right <->**/
.ltr(@left) when (@left = true){
  @l:left;
  @r:right;
}

.ltr(@left) when (@left = false){
  @r:left;
  @l:right;
}

/** - RibbonTag Mixin -*/
.ribbonTag(@bg,@left:true,@s:1em){
 @col: lighten(@bg,40%);
 .ltr(@left);
  position: absolute;
  @{l}: -@s/2;
  background: @bg;
  color: @col;
  text-align: center;
  text-shadow: 0 1px darken(@bg,30%);
  line-height: @s;
  padding: (0.25*@s) (0.15*@s) (0.25*@s)(0.5*@s);

 

  &:before{
   content: "";
   position: absolute;
   display: block;
   border-style: solid;
   border-color: darken(@bg,30%) transparent transparent transparent;
   bottom:  -0.5*@s;
   @{l}: 0;
   border-top-width: 0.5*@s;
   border-@{r}-width: 0;
   border-bottom-width: 0;
   border-@{l}-width: 0.5*@s;
   }

   &:after{
   content: "";
   position: absolute;
   display: block;
   top:0;
   border: 0.76*@s solid @bg;        
   @{r}: -@s;
   border-@{l}-width: 0.25*@s;
   border-@{r}-color: transparent;
   }
   
 
 }

// Custom Settings 
body{
  font-family:sans-serif; 
  font-size:24px;
  color: #2f7899;
}
.tag{
  display:inline-block;
  position: absolute;
  top: 20px;
}
// Call mixin, default is left 
.left-tag{
   .ribbonTag(#2f7899); 
}
// Call mixin with second parameter 'false'= right
.right-tag{
   .ribbonTag(#2f7899,false); 
}
.ex2-left{
   font-size:60px;
   text-transform: uppercase;
   
   .ribbonTag(#fbc822,true,50px);

}
.ex2-right{
   font-size: 40px;
   .ribbonTag(#22cc99,false,0.8em);
}

/*To show*/

.row{
  display: block;
  float: left;
}
.my-frame{
  height: 300px;
  width: 300px;
  display: inline-block;
  position: relative;
  float: left;
  border: black solid 1px;
  background: #ddf;
  margin:10px 50px ;
 // .box-shadow(1px 1px 2px rgba(0,0,0,.7)); 
  
  & img{
    width: 100%;
  }
}
       
/*** Example End ***/