/index.html
Last active Dec 11, 2015
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