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.
Last active
July 4, 2020 00:06
-
-
Save codingdudecom/1b219d915cfd4c2917a0be45b3cbcdda to your computer and use it in GitHub Desktop.
80s Fonts Text Effect 7: CSS Hauser Font Chrome Text Effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="centered"><div class="hauser" data-text="HAUSER">HAUSER</div></div> | |
| <svg> | |
| <defs> | |
| <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="backGradientFill"> | |
| <stop offset="0%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| <stop offset="25%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| <stop offset="48%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| <stop offset="75%" style="stop-color: #949ec0; stop-opacity: 100%;" /> | |
| <stop offset="80%" style="stop-color: #b0cefd; stop-opacity: 100%;" /> | |
| <stop offset="100%" style="stop-color: white; stop-opacity: 0%;" /> | |
| </linearGradient> | |
| <linearGradient x1="50%" y1="100%" x2="50%" y2="-10%" id="frontGradientFill"> | |
| <stop offset="0%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="5%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="17%" style="stop-color: #cfe1fd; stop-opacity: 100%;" /> | |
| <stop offset="22%" style="stop-color: #949ec0; stop-opacity: 100%;" /> | |
| <stop offset="26%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| <stop offset="28%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| <stop offset="30%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="40%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="50%" style="stop-color: #191c2b; stop-opacity: 100%;" /> | |
| </linearGradient> | |
| <linearGradient x1="50%" y1="25%" x2="50%" y2="90%" id="strokeGradientFill"> | |
| <stop offset="0%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="25%" style="stop-color: white; stop-opacity: 100%;" /> | |
| <stop offset="35%" style="stop-color: #8ae7ee; stop-opacity: 100%;" /> | |
| <stop offset="59%" style="stop-color: #485790; stop-opacity: 100%;" /> | |
| <stop offset="80%" style="stop-color: #8ae7ee; stop-opacity: 100%;" /> | |
| <stop offset="100%" style="stop-color: white; stop-opacity: 0%;" /> | |
| </linearGradient> | |
| <rect id="gradient1" x="0%" y="10%" width="100%" height="55%" style="fill: url(#backGradientFill);" /> | |
| <rect id="gradient2" x="0%" y="0" width="100%" height="100%" style="fill: url(#frontGradientFill);" /> | |
| <rect id="gradient3" x="0%" y="0" width="100%" height="100%" style="fill: url(#strokeGradientFill);" /> | |
| <filter id="backGradient"> | |
| <feImage xlink:href="#gradient1" result="grad"/> | |
| <feComposite operator="atop" in2="SourceGraphic" in="thickened" result="stroke"/> | |
| <feMerge> | |
| <feMergeNode in="sourceGraphic"></feMergeNode> | |
| <feMergeNode in="stroke"></feMergeNode> | |
| </feMerge> | |
| </filter> | |
| <filter id="frontGradient"> | |
| <feImage xlink:href="#gradient2" result="grad"/> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.07" | |
| numOctaves="1" result="turbulence"/> | |
| <feDisplacementMap in2="turbulence" in="grad" | |
| scale="10" /> | |
| <feComposite operator="in" in2="SourceGraphic" in="thickened" result="stroke"/> | |
| </filter> | |
| <filter id="stroke"> | |
| <!-- <feFlood flood-color="#dadde5" result="strokeColor" /> --> <feImage xlink:href="#gradient3" result="strokeColor"/> | |
| <feMorphology operator="dilate" radius="1" | |
| in="SourceGraphic" result="outside" /> | |
| <feMorphology operator="dilate" radius="2" | |
| in="outside" result="thickened" /> | |
| <feComposite operator="out" in2="SourceGraphic" in="thickened" result="stroke"/> | |
| <feComposite operator="in" in="strokeColor" in2="stroke" result="stroke"/> | |
| <feMerge> | |
| <feMergeNode in="SourceGraphic"></feMergeNode> | |
| <feMergeNode in="stroke"></feMergeNode> | |
| </feMerge> | |
| </filter> | |
| <filter id="innerGlow" > | |
| <feFlood flood-color="#c45cff"/> | |
| <feComposite in2="SourceGraphic" operator="out"/> | |
| <feGaussianBlur stdDeviation="5" result="blur"/> | |
| <feComposite operator="atop" in2="SourceGraphic" result="glow"/> | |
| <feBlend in="SourceGraphic" in2="glow" mode="screen"></feBlend> | |
| </filter> | |
| <filter id="outerGlow" > | |
| <!-- Thicken out the original shape --> | |
| <feMorphology operator="dilate" radius="10" in="SourceAlpha" result="thicken" /> | |
| <!-- Use a gaussian blur to create the soft blurriness of the glow --> | |
| <feGaussianBlur in="thicken" stdDeviation="20" result="blurred" /> | |
| <!-- Change the colour --> | |
| <feFlood flood-color="#395086" result="glowColor" /> | |
| <!-- Color in the glows --> | |
| <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" /> | |
| <!-- Layer the effects together --> | |
| <feMerge> | |
| <feMergeNode in="softGlow_colored"/> | |
| <feMergeNode in="SourceGraphic"/> | |
| </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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root{ | |
| background:black; | |
| filter:url(#noise) contrast(110%); | |
| } | |
| .centered{ | |
| position:absolute; | |
| left:50vw; | |
| top:50vh; | |
| transform:translateX(-50%) translateY(-50%); | |
| text-align:center; | |
| } | |
| .hauser{ | |
| color:white; | |
| font-family:'Hauser'; | |
| font-size:40vh; | |
| padding:0 1em; | |
| filter:url(#outerGlow); | |
| } | |
| .hauser:after{ | |
| content:attr(data-text); | |
| position:absolute; | |
| left:0; | |
| padding:0 1em; | |
| filter: url(#frontGradient) url(#backGradient) url(#innerGlow) url(#stroke); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://www.coding-dude.com/fonts/hauser-styles.css" rel="stylesheet" /> |
Author
please note that depending on browser support some effects work more or less accurate. the effects should work find on chrome latest version
Chrome 79.0.3945.130
Author
I made a modification to the codepen (frontGradientFill) and it should look good now
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
don't work first gradient