"knockout" text (able to see background through text) using SVG. Doesn't support text wrapping at the moment, but could be added via Javascript.
Created
March 15, 2018 17:24
-
-
Save shshaw/056d88e134ca52c4e17dffb91d88edc1 to your computer and use it in GitHub Desktop.
Knockout Text with SVG
This file contains 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
<h1 class="title absolute-center"> | |
<span class="knockout"> | |
<!-- Change text here --> | |
<span class="knockout__text">KNOCKOUT TEXT</span> | |
<svg class="knockout__svg" width="100%" height="100%" text-rendering="geometricPrecision"> | |
<defs> | |
<mask id="text-clip"> | |
<text x="0" y="0.9em" width="100%" height="100%" fill="#FFF">KNOCKOUT TEXT</text> | |
</mask> | |
<!-- Ideal for word-wrapping, but it doesn't work as a mask :-( --> | |
<mask id="text-mask"> | |
<foreignObject x="0" y="0" width="100%" height="100%"> | |
<body xmlns="http://www.w3.org/1999/xhtml"> | |
<div style="color: #FFF">KNOCKOUT TEXT</div> | |
</body> | |
</foreignObject> | |
</mask> | |
</defs> | |
<image width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="https://picsum.photos/1000/1000?image=994" mask="url(#text-clip)"></image> | |
</svg> | |
</span> | |
</h1> | |
<!--<svg width="100%" height="100%" text-rendering="geometricPrecision"> | |
<defs> | |
<mask id="image-mask"> | |
<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://i.imgur.com/YVSnio4.jpg"></image> | |
</mask> | |
<pattern id="image-pattern" width="100%" height="100%" patternContentUnits="userSpaceOnUse"> | |
<image width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="https://i.imgur.com/YVSnio4.jpg" mask="url(#text-clip)"></image> | |
</pattern> | |
</defs> | |
<foreignObject width="100%" height="100%" fill="url(#image-pattern)" mask="url(#image-mask)"> | |
<body xmlns="http://www.w3.org/1999/xhtml"> | |
<div style="color:#AAA">KNOCKOUT TEXT THAT WRAPS AROUND</div> | |
</body> | |
</foreignObject> | |
</svg>--> |
This file contains 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
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains 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
@import "lesshat"; | |
@import url(https://fonts.googleapis.com/css?family=Oswald); | |
html, body { | |
height: 100%; | |
} | |
//body { background-image: url(http://brokensquare.com/Code/assets/landscape.jpg); } | |
body, | |
.title { | |
font-family: "Oswald", sans-serif; | |
font-size: 80px; | |
line-height: 1; | |
color: #FFF; | |
text-align: center; | |
} | |
.title { | |
width: 100%; | |
height: 0.2em; | |
overflow: visible; | |
} | |
.knockout { | |
display: inline-block; | |
overflow: hidden; | |
text-align: left; | |
position: relative; | |
white-space: nowrap; // Until I can work out the issues with line wrapping in SVG | |
} | |
.knockout__text { | |
color: transparent; | |
} | |
.knockout__svg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
user-select: none; | |
} | |
//////////////////////////////////////// | |
// Presentational Styles | |
body { | |
background-color: #FFF; | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: cover; | |
background-attachment: fixed; | |
} | |
.absolute-center { | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
margin: auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment