iOS style notifier/close/delete/new

index.html

<div id="demo">
  <a class="osx" href="#" data-number="1"></a>
  <a class="osx2" href="#"></a>
  <a class="ios" href="#"></a>
  <a class="ios3" href="#" data-number="1"></a>
  <div class="ios2">
    <a title="hide/remove/delete" href="#">─</a>
  </div>
</div>

iOS-style-notifier-close-delete-new.markdown

iOS style notifier/close/delete/new

iOS and Mac OSX icon notifiers/badges/banners etc. Open to constructive comments :D

A Pen by Gavin Cox on CodePen.

License.

script.js

// iOS and Mac OSX icon notifiers/badges/banners etc. Open to constructive comments :D

style.less

HTML {
  height:           100%;
  width:            100%;
  background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png');
}
#demo {
  width:  820px;
  margin: 50px auto 0;
}
.osx, .osx2 {
  /* OS X icons */
  background:  url('http://upload.wikimedia.org/wikipedia/en/7/78/Apple_Mail.png') no-repeat 50% 50%;
  box-reflect: below -30px linear-gradient(bottom, rgba(0,0,0,.4), rgba(0,0,0,0) 40%);
}
.ios, .ios2, .ios3 {
  /* iOS icons */
  background: url('http://2.bp.blogspot.com/-rc3G454yZeE/TmExcHguHFI/AAAAAAAADUA/-zhYBe1yJB8/s200/icloud.png') no-repeat 50% 50%;
  /* box-reflect: below 2px linear-gradient(bottom, rgba(0,0,0,.4), rgba(0,0,0,0) 40%); */
}
.osx, .osx2, .ios, .ios2, .ios3 {
  /* All icons */
  position:        relative;
  float:           left;
  width:           150px;
  height:          150px;
  text-decoration: none;
}
.osx {
  /* first icon - counter */
  &[data-number]:after {
    #badge > .count(1.6em);
    content:  attr(data-number);
    position: absolute;
    top:      15px;
    right:    20px;
  }
}
.osx2 {
  /* second icon - 'close/close window' */
  &:after {
    #badge > .close(1.6em);
    content:  '\2715';
    position: absolute;
    top:      15px;
    right:    20px;
  }
}
.ios {
  /* third icon - 'New' banner */
  overflow: hidden;
  &:after {
    #badge > .banner('New',1.3em);
  }
}
.ios2 {
  /* fifth icon - 'remove' badge */
  margin-left: 2em;
  animation:   jiggle 0.3s infinite;
  a {
    #badge > .remove(1.8em);
    position:        absolute;
    top:             -7px;
    left:            -10px;
    text-decoration: none;
  }
}
.ios3 {
  /* fourth icon - simple counter */
  margin-left: 1em;
  &:after {
    #badge > .count(1.8em);
    content:  attr(data-number);
    position: absolute;
    top:      -7px;
    right:    -10px;
  }
}

@keyframes jiggle {
  0%   { transform: rotate(1deg) }
  25%  { transform: translateY(-1px) }
  50%  { transform: rotate(-1deg) }
  75%  { transform: translateY(1px) }
  100% { transform: rotate(0deg); }
}
.circle {
  /* Basic notifier style */
  font-family:    Arial, sans-serif;
  letter-spacing: 0;
  color:          #fff;
  text-align:     center;
  min-height:     1em;
  min-width:      1em;
  line-height:    1em;
  padding:        0.15em;
  padding-bottom: 0.1em;
  border:         0.12em solid #fff;
  border-radius:  1em;
}
#badge {
  .count(@fontsize:1.3em) {
    /* Apply basic circular badge styles */
    .circle;
    /* Extra 'Counter' badge styles */
    font-size:        @fontsize;
    background-color: red;
    background:       linear-gradient(top, rgba(255,150,150,1) 0%,rgba(200,0,0,1) 100%);
    box-shadow:       inset 0 1px 0 rgba(255,0,0,1), 0 0 1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.6);
  }
  .close (@fontsize:1.3em) {
    /* Apply basic circular badge styles */
    .circle;
    padding:          0.18em 0.1em 0.1em 0.15em;
    /* Extra 'Close' badge styles */
    font-size:        @fontsize;
    background-color: #000;
    box-shadow:       0 0 1px rgba(0,0,0,0.5), 0 3px 3px rgba(0,0,0,0.8);
  }
  .remove (@fontsize:1.3em) {
    /* Apply basic circular badge styles */
    .circle;
    /* Extra 'Remove' badge styles */ 
    font-size:        @fontsize;
    background-color: rgba(200,0,0,1);
    box-shadow:       0 0 1px rgba(0,0,0,0.2), 0 4px 5px rgba(0,0,0,0.6);
  }
  .banner(@message:'New',@fontsize:1.3em) {
    /* 'Banner' badge styles */
    font-size:        @fontsize;
    content:          @message;
    position:         absolute;
    top:              25px;
    right:            -35px;
    width:            10px;
    line-height:      1.5em;
    width:            150px;
    font-family:      Arial, sans-serif;
    color:            #fff;
    text-shadow:      0 0 2px rgba(0,0,0,1);
    font-weight:      700;
    transform:        rotate(45deg);
    text-align:       center;
    background-color: rgba(255,0,0,1);
    background-size:  5px;
    background-image: linear-gradient(0, rgba(107,152,233,1) 0%,rgba(37,93,214,1) 100%);
    box-shadow:       inset -1px 2px 5px rgba(255,255,255,0.4), inset 1px -2px 5px rgba(0,0,0,0.3), 0 1px 5px rgba(0,0,0,0.7);
  }
}