Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save codingdudecom/b90e3b9b67e8a504980a1a24541a9df1 to your computer and use it in GitHub Desktop.
Save codingdudecom/b90e3b9b67e8a504980a1a24541a9df1 to your computer and use it in GitHub Desktop.
80s Fonts Text Effect 10: CSS Stranger Things Text Effect
<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>
: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;
}
<link href="https://www.coding-dude.com/fonts/eightees-horror-stylesheet.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment