80s Fonts Text Effect 10: CSS Stranger Things Text Effect

80s-fonts-text-effect-10-css-stranger-things-text-effect.markdown

80s Fonts Text Effect 10: CSS Stranger Things Text Effect

Inspired by PSDDude's 80s font collection this text effect is part of the SVG filters 80s font text effects list on http://www.coding-dude.com/wp/css/svg-filters/

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<div class="centered">
  
  <div class="stranger-things">
  <hr><div class="eighties line1">STRANGE<span class="last-letter">R</span></div><hr class="bottom-line"><hr class="bottom-line right"><div class="eighties line2">CSS THINGS</div>
    </div>
    </div>

<svg viewbox="0 0 100% 100%">
  
  <defs>
  <circle id="diffuseLightSpot" cx="50%" cy="50%" r="25%" fill="#ea886d" />  
    
    
    <filter id="stroke">
     <feMorphology operator="dilate" radius="1.5" 
in="SourceGraphic" result="outside" />
     <feMorphology operator="dilate" radius="2" 
in="outside" result="thickened" />
     <feComposite operator="out" in2="SourceGraphic" in="thickened" result="stroke"/>
  </filter>
    
    
    <filter id="bloom" >
      <feGaussianBlur stdDeviation="5" result="blur"/>
      <feBlend in="SourceGraphic" in2="blur" mode="screen" result="bloomed"/>
      <feMerge>
        <feMergeNode in="bloomed"></feMergeNode>
        <feMergeNode in="blur"></feMergeNode>
      </feMerge>
</filter>
    
    <filter id="bevel">
            <feGaussianBlur stdDeviation="1" in="SourceGraphic" result="BLUR"/>
      
<feSpecularLighting surfaceScale="1" specularConstant="5" specularExponent="40" lighting-color="#ea886d" in="BLUR" result="SPECULAR">
    <fePointLight x="100" y="0" z="400" />
</feSpecularLighting>
      <feSpecularLighting surfaceScale="1" specularConstant="10" specularExponent="50" lighting-color="#ea886d" in="BLUR" result="SPECULAR1">
    <fePointLight x="1000" y="0" z="500" />
</feSpecularLighting>
          <!-- We cut off the parts that overlap the source graphic… -->
      
      <feSpecularLighting surfaceScale="1" specularConstant="3" specularExponent="100" lighting-color="#dd7170" in="BLUR" result="SPECULAR2">
    <fePointLight x="100" y="100" z="1000" />
</feSpecularLighting>

<feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>
<feComposite operator="in" in="SPECULAR1" in2="SourceAlpha" result="COMPOSITE1"/>
      
      <feComposite operator="in" in="SPECULAR2" in2="SourceAlpha" result="COMPOSITE2"/>

<!-- … and then merge source graphic and lighting effect: -->

<feMerge>
    <feMergeNode in="SourceGraphic" />
    <feMergeNode in="COMPOSITE"/>
  <feMergeNode in="COMPOSITE1"/>
  <feMergeNode in="COMPOSITE2"/>
</feMerge>
        </filter>
  <filter id="noise" x="0vw" y="0vh" width="100vw" height="100vh">
      <feFlood flood-color="#808080" result="neutral-gray" />      
      <feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.8" numOctaves="10" stitchTiles="stitch" result="noise"/>
      <feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix>
      <feComponentTransfer in="desaturatedNoise" result="theNoise">
        <feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA>
      </feComponentTransfer>
      <feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image"/>      
    </filter>
  
  </defs>
</svg>

style.css

:root{
  background:black;
}

:root::before{
  content:'';
  position:absolute;
  width:100vw;
  height:100vh;
  left:0;
  top:0;
  filter:url(#noise);
}

.centered{
  position:absolute;
  left:50vw;
  top:50vh;
  transform:translateX(-50%) translateY(-50%);
  text-align:center;
}



.stranger-things{
  filter:url(#bevel) url(#stroke) url(#bloom);
}

.stranger-things hr{
  border:none;
  background-color:#c81914;
  height:3px;
}

.stranger-things hr.bottom-line{
  margin-top:30px;
  margin-bottom:-30px;  
  width:12%;
  position:absolute;
}

.stranger-things hr.bottom-line.right{
  right:0;
  
}

.eighties{
  color:#c81914;
  font-size:50pt;
  font-family:'Eighties Horror';
  line-height:1em;
  letter-spacing:3px;
}

.eighties.line1{
  font-size:70pt;
  letter-spacing:4px;
  margin-left:0.3em;
}

.eighties.line1:first-letter,.eighties.line1 .last-letter {
  font-size:1.2em;
  vertical-align:middle;
  line-height:0;
}

styles

<link href="https://www.coding-dude.com/fonts/eightees-horror-stylesheet.css" rel="stylesheet" />