Blurred, Invisible Ink, and Redacted text (CSS only)

Blurred, Invisible Ink, and Redacted text (CSS only).markdown

Blurred, Invisible Ink, and Redacted text (CSS only)

Exploring some ways of visually hiding or obscuring text with CSS filters and pseudo-elements.

A Pen by Adam Ruf on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <h2>Blurred</h2>
      <p class="blurred">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
    </div>
    <div class="col-md-4">
      <h2>Invisible Ink</h2>
      <p class="invisible-ink">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
    </div>
    <div class="col-md-4">
      <h2>Redacted</h2>
      <p class="redacted">The home of <span>these birds</span> was on the shore of <span>the lake Stymphalis</span>, in <span>Arcadia</span> (after which they were called), where they <span>caused great destruction</span> among men and cattle.</p>
    </div>
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.scss

$white: #fafafa;

body {
  background: $white;
  color: rgba(0,0,0,0.84);
  font-size: 20px;
  line-height: 1.5;
  padding-top: 1em;
}
h2 {
  font-family: Raleway;
  font-weight: 900;
}
p {
  font-family: 'Special Elite';
}

.blurred span {
  filter: blur(6px);
  /* As pointed out by Alexander Erlandsson (@alexerlandsson), for situations that require better cross-browser support, the blur effect is easily reproduced with transpartent text + text-shadow
  color: transparent;
  text-shadow: 0 0 12px rgba(0,0,0,0.8); */
}

.invisible-ink span {
  background: $white;
  color: $white;
  /* Vincent Charpentier (@VincentCharpentier) also pointed out a simple rule for true invisibility
  color: rgba(0,0,0,0);*/
}

.redacted span {
  position: relative;
  white-space: pre;
  &:after {
    background: black;
    border-radius: 0.1em;
    box-shadow: 0 0 1px rgba(0,0,0,0.35);
    content: " ";
    width: 100%;
    height: 1.2em;
    left: 0;
    position: absolute;
    transform: skewY(-5deg) rotate(5deg);
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />