×

Status message

Demo Page: demos/note-class potentially unstable

Demo: Note Class

A note effect using CSS border-radius. Just add it to any element class!

.note {
  position: relative;
  font-family: 'ArchitectsDaughter', 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;
  font-size: 0.9em;
  text-shadow: none;
  background: #ebebeb;
  background: rgba(235,235,235,0.9);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(235,235,235,0.9)), color-stop(100%, rgba(212,212,212,0.8))), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  background: -webkit-radial-gradient(center ellipse, rgba(235,235,235,0.9) 0%, rgba(212,212,212,0.8) 100%), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  background:    -moz-radial-gradient(center ellipse, rgba(235,235,235,0.9) 0%, rgba(212,212,212,0.8) 100%), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  background:     -ms-radial-gradient(center, ellipse cover, rgba(235,235,235,0.9) 0%, rgba(212,212,212,0.8) 100%), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  background:      -o-radial-gradient(center ellipse, rgba(235,235,235,0.9) 0%, rgba(212,212,212,0.8) 100%), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  background:         radial-gradient(ellipse at center, rgba(235,235,235,0.9) 0%, rgba(212,212,212,0.8) 65%), linear-gradient(225deg, transparent 11.31371px, rgba(212,212,212, 0.8) 11.31371px, rgba(212,212,212, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#d4d4d4', GradientType=1 );
  color: #555;
  -webkit-background-size: 100% calc(100% - 16px), 100% 16px;
     -moz-background-size: 100% calc(100% - 16px), 100% 16px;
          background-size: 100% calc(100% - 16px), 100% 16px;
  background-position: 0 16px, 0 0;
  background-repeat: no-repeat;
  padding: 4px 24px 2px 12px;
  border-radius: 6px;
}
.note:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
     -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
          box-shadow: -1px 1px 1px rgba(0,0,0,0.3);
  background: -webkit-linear-gradient(225deg, transparent 50%, rgba(212,212,212, 0.75) 50%);
  background:    -moz-linear-gradient(225deg, transparent 50%, rgba(212,212,212, 0.75) 50%);
  background:      -o-linear-gradient(225deg, transparent 50%, rgba(212,212,212, 0.75) 50%);
  background:         linear-gradient(225deg, transparent 50%, rgba(212,212,212, 0.75) 50%);
  border-radius: 0px 0px 0px 6px;
}

.col-12

.col-6

.col-6

.col-4

.col-4

.col-4

.col-3

.col-3

.col-3

.col-3

.col-2

.col-2

.col-2

.col-2

.col-2

.col-2