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