Note Style

A note effect using CSS gradient and border-radius.

Example Styles

Normal Notes (Paper-Like)

.col-12

.col-6

.col-4

.col-3

.col-2

Tip Notes (Translucent Yellow)

.col-12

.col-6

.col-4

.col-3

.col-2

Implementation

CSS Version

@font-face { /* hand-written syle used in note classes/elements */
  font-family: 'ArchitectsDaughter';
  src: url('./font/ArchitectsDaughter/ArchitectsDaughter.eot'); /* IE9 Compat Modes */
  src: local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
       url('./font/ArchitectsDaughter/ArchitectsDaughter.woff2') format('woff2'), /* Super Modern Browsers */
       url('./font/ArchitectsDaughter/ArchitectsDaughter.woff') format('woff'), /* Pretty Modern Browsers */
       url('./font/ArchitectsDaughter/ArchitectsDaughter.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./font/ArchitectsDaughter/ArchitectsDaughter.svg') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

.note {
  position: relative;
  font-family: 'ArchitectsDaughter', 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;
  text-shadow: none;
}

.note {
  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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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 0.70711em, rgba(212,212,212, 0.8) 0.70711em, 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% - 1em), 100% 1em;
     -moz-background-size: 100% calc(100% - 1em), 100% 1em;
          background-size: 100% calc(100% - 1em), 100% 1em;
  background-position: 0 1em, 0 0;

  background-repeat: no-repeat;
  padding: 0.5em 1.5em 0.5em 1em;
  border-radius: $radius_content;
}

.note--tip {
  background: rgba(255, 229, 0, 0.1);
  background: linear-gradient(90deg, rgba(255, 229, 0, 0.15), rgba(255, 229, 0, 0.05));
  background: linear-gradient(225deg, transparent 0.70711em, rgba(255, 229, 0, 0.1) 0.70711em, rgba(255, 229, 0, 0.15) 100%);
  background-repeat: no-repeat;
  color: rgba(255, 229, 0, 0.85);
}

.note:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1em;
  height: 1em;
  -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);
  border-radius: 0px 0px 0px 0.375em;
}

.note:after {
  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%);
}

.note--tip:after {
  background: -webkit-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
  background:    -moz-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
  background:      -o-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
  background:         linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
}

Sass (SCSS) Version

$note_corner_size: 1em;
$note_corner_diag: $note_corner_size * 0.7071067811865475; // 0.7071067811865475 = sqrt( 2 ) / 2, i.e. sqrt( 16px ) / 2 = 11.31371px
$note_corner_curve: $note_corner_size * 0.375; // i.e. 16px * 0.375 = 6px

@font-face { /* hand-written syle used in note classes/elements */
font-family: 'ArchitectsDaughter';
src: url('./font/ArchitectsDaughter/ArchitectsDaughter.eot'); /* IE9 Compat Modes */
src: local('☺'), /* css hack to divert IE6-8 from downloading fonts it can't use */
     url('./font/ArchitectsDaughter/ArchitectsDaughter.woff2') format('woff2'), /* Super Modern Browsers */
     url('./font/ArchitectsDaughter/ArchitectsDaughter.woff') format('woff'), /* Pretty Modern Browsers */
     url('./font/ArchitectsDaughter/ArchitectsDaughter.ttf') format('truetype'), /* Safari, Android, iOS */
     url('./font/ArchitectsDaughter/ArchitectsDaughter.svg') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}

.note {
position: relative;
font-family: 'ArchitectsDaughter', 'Comic Sans', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', 'Marker Felt', 'Purisa', 'URW Chancery L', cursive;
text-shadow: none;
}

.note {
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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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 $note_corner_diag, rgba(212,212,212, 0.8) $note_corner_diag, 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% - #{$note_corner_size}), 100% $note_corner_size;
   -moz-background-size: 100% calc(100% - #{$note_corner_size}), 100% $note_corner_size;
        background-size: 100% calc(100% - #{$note_corner_size}), 100% $note_corner_size;
background-position: 0 $note_corner_size, 0 0;

background-repeat: no-repeat;
padding: 0.5em #{$note_corner_size + 0.5} 0.5em 1em;
// padding: 0.5em #{$note_corner_size * 1.5} 0.5em 1em;
border-radius: $radius_content;
}

.note--tip {
background: rgba(255, 229, 0, 0.1);
background: linear-gradient(90deg, rgba(255, 229, 0, 0.15), rgba(255, 229, 0, 0.05));
background: linear-gradient(225deg, transparent $note_corner_diag, rgba(255, 229, 0, 0.1) $note_corner_diag, rgba(255, 229, 0, 0.15) 100%); /* $note_corner_diag = sqrt(16^2 + 16^2)/2 = length from corner to center of 16x16 area */
background-repeat: no-repeat;
color: rgba(255, 229, 0, 0.85);
}

.note:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: $note_corner_size;
height: $note_corner_size;
-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);
border-radius: 0px 0px 0px $note_corner_curve;
}

.note:after {
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%);
}

.note--tip:after {
background: -webkit-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
background:    -moz-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
background:      -o-linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
background:         linear-gradient(225deg, transparent 50%, rgba(255, 229, 0, 0.15) 50%);
}