CSS Glitched Text

css-glitched-text.markdown

CSS Glitched Text

Pure CSS glitched, noisy, analog-y text.

Forked from Lucas Bebber's Pen CSS Glitched Text.

A Pen by ankalagon on CodePen.

License.

index.html

<!-- SVG def -->
[[[https://codepen.io/chriscoyier/pen/7c2aabdfd759e763807eb44b2ff077e2/]]]

<div class="wrap">

  <div class="example-one" data-text="GLITCH">GLITCH</div> 

  <div class="example-two" data-text="INFORMATION">INFORMATION</div> 

  <div class="example-three">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skullcrossbones-white.svg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skullcrossbones-red-highlight.svg">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skullcrossbones-white.svg">
  </div>
  
  <div class="example-four">
    <svg class="icon">
      <use xlink:href="#icon-waste"></use>
    </svg>
    <svg class="icon">
      <use xlink:href="#icon-waste"></use>
    </svg>
    <svg class="icon">
      <use xlink:href="#icon-waste"></use>
    </svg>
  </div>
  
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

/* 
  MIXIN(S)
  =================
 /chriscoyier/pen/FwJux


  (TEXT) PARAMS
  =================
  1. Namespace
  2. Intensity
  3. Text color
  4. Background color (flat)
  5. Highlight #1 color
  6. Highlight #2 color
  7. Width (px)
  8. Height (px)
*/

// Usage
.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}
.example-two {
  font-size: 52px;
  @include textGlitch("example-two", 10, red, black, white, green, 714, 50);
}


/* 
  (IMAGE) PARAMS
  =================
  @mixin imgGlitch($name, $intensity, $width, $height, $top, $left)
  =================
  1. Namespace
  2. Intensity
  3. Width (px)
  4. Height (px)
  5. Top (px, abs pos)
  6. Left (px, abs pos)
*/

.example-three {
  @include imgGlitch("example-three", 15, 100, 100, 200, 75);
}

/* 
  (SVG) PARAMS
  =================
  @mixin svgGlitch($name, $intensity, $fillColor, $background, $width, $height, $top, $left)
  =================
  1. Namespace
  2. Intensity
  3. Fill Color
  4. Background
  5. Width (px)
  6. Height (px)
  5. Top (px, abs pos)
  6. Left (px, abs pos)
*/
.example-four {
  @include svgGlitch("example-four", 30, white, black, red, red, 100, 100, 200, 175);
}


body {
  background: black;
  font-family: Sans-serif;
  padding: 20px;
}
.wrap {
  width: 400px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

styles

<link href="https://codepen.io/chriscoyier/pen/FwJux.scss" rel="stylesheet" />