Strokes, Shadows + Halftone Effects

index.pug

mixin heading(className)
	h1(class="heading " + className) Hello
	
+heading('heading--stroke heading--shadow')
+heading('heading--stroke-shadow')
+heading('heading--stroke heading--halftone')
+heading('heading--stroke heading--halftone heading--halftone-color')

.info Halftone effect from 
	a(href="http://www.patternify.com/") Patternify

strokes-shadows-halftone-effects.markdown

Strokes, Shadows + Halftone Effects

A Pen by Mark on CodePen.

License.

dEMO https://codemyui.com/?p=29850

style.scss

$body: #f2cee6;
$stroke: #0d1b1e;
$shadow: #2dc7ff;
$size: 8rem;
$halftone: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVQYV2NUVFT8f//+fUYGBgYGMAEDcA5IBQCKJQVmn76DhAAAAABJRU5ErkJggg==");

@mixin stroke-width($property) {
  -webkit-text-stroke-width: $property;
  -moz-text-stroke-width: $property;
}

@mixin stroke-color($property) {
  -webkit-text-stroke-color: $property;
  -moz-text-stroke-color: $property;
}

@mixin background-clip($property) {
  -webkit-background-clip: $property;
  -moz-background-clip: $property;
  background-clip: $property;
}

@mixin fill-color($property) {
  -webkit-text-fill-color: $property;
  -moz-text-fill-color: $property;
}

body {
  background-color: $body;
  padding: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  text-align: center;

  @media screen and (min-width: 1000px) {
    grid-template-columns: 1fr 1fr;
  }
}

.heading {
  font-size: $size;
  letter-spacing: 6px;
  margin: 2rem 0;

  &--stroke {
    @include stroke-width(2px);
    @include stroke-color($stroke);
    color: transparent;
  }

  &--shadow {
    text-shadow: 6px 6px $shadow;
  }

  &--stroke-shadow {
    color: $body;
    text-shadow: -2px 0 $stroke, 0 -2px $stroke, 2px 0 $stroke, 0 2px $stroke, 2px 2px $stroke, -2px -2px $stroke, -2px 2px $stroke, 2px -2px $stroke, 6px 6px $shadow;
  }

  &--halftone {
    position: relative;

    &:after {
      background: $halftone repeat;
      @include stroke-width(0);
      @include background-clip(text);
      @include fill-color(transparent);
      font-size: $size;
      letter-spacing: 6px;
      left: calc(50% + 6px);
      top: calc(50% + 6px);
      content: "Hello";
      z-index: -1;
      position: absolute;
      transform: translate(-50%, -50%);
    }

    &-color {
      &:after {
        background-color: $shadow;
      }
    }
  }
}

.info {
  padding: 1rem 0;

  @media screen and (min-width: 1000px) {
    grid-column: 1 / 3;
  }
}