Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Dec 11, 2015

Embed
What would you like to do?
Houndstooth text mask
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Houndstooth</title>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
<style>
body {
font-size: 100px;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAARUlEQVQYV2NkYGD4D8S4ACMjHgUgOQZcCsCSIM3YFMAlYSbA7Ie5BVkT2A1go6A0iiS6G2CKUXwE04FsEopCZA6yNXBTADptDgiJUOefAAAAAElFTkSuQmCC");
-moz-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAARUlEQVQYV2NkYGD4D8S4ACMjHgUgOQZcCsCSIM3YFMAlYSbA7Ie5BVkT2A1go6A0iiS6G2CKUXwE04FsEopCZA6yNXBTADptDgiJUOefAAAAAElFTkSuQmCC");
-o-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAARUlEQVQYV2NkYGD4D8S4ACMjHgUgOQZcCsCSIM3YFMAlYSbA7Ie5BVkT2A1go6A0iiS6G2CKUXwE04FsEopCZA6yNXBTADptDgiJUOefAAAAAElFTkSuQmCC");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAARUlEQVQYV2NkYGD4D8S4ACMjHgUgOQZcCsCSIM3YFMAlYSbA7Ie5BVkT2A1go6A0iiS6G2CKUXwE04FsEopCZA6yNXBTADptDgiJUOefAAAAAElFTkSuQmCC");
mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAYAAAAPU20uAAAARUlEQVQYV2NkYGD4D8S4ACMjHgUgOQZcCsCSIM3YFMAlYSbA7Ie5BVkT2A1go6A0iiS6G2CKUXwE04FsEopCZA6yNXBTADptDgiJUOefAAAAAElFTkSuQmCC");
}
a {
color: #000;
text-decoration: none;
}
</style>
</head>
<body>
<p><a href="http://j.mp/WvTKij">Houndstooth</a></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.