CSS Clip-path examples

HTML
<div class="wrapper"> <p class="title">Play with background-clip text</p> <div class="clip-text clip-text_one">Knuckles</div> <div class="clip-text clip-text_two clip-text--no-textzone">Knuckles</div> </div>
SCSS
/* Based from this article from Divya Manian - http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html */ * { margin: 0; padding: 0; } *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { min-height: 100%; } body { font-family: 'Lobster Two', cursive; color: #fff; background-color: #000; } .wrapper { text-align: center; } .title { font-size: 2em; position: relative; margin: 0 auto 1em; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase; } .title:after { position: absolute; top: 100%; left: 50%; width: 240px; height: 4px; margin-left: -120px; content: ''; background-color: #fff; } /* Clip text element */ .clip-text { background-size: contain; font-size: 6em; font-weight: bold; line-height: 1; position: relative; display: inline-block; margin: .25em; padding: .5em .75em; text-align: center; /* Color fallback */ color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .clip-text:before, .clip-text:after { position: absolute; content: ''; } /* Background */ .clip-text:before { z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; } /* Text Background (black zone) */ .clip-text:after { position: absolute; z-index: -1; top: .125em; right: .125em; bottom: .125em; left: .125em; background-color: rgba(0,0,0,0.9); } /* Change the background position to display letter when the black zone isn't here */ .clip-text--no-textzone:before { background-position: -.65em 0; } .clip-text--no-textzone:after { content: none; } /* Use Background-size cover for photo background and no-repeat background */ .clip-text--cover, .clip-text--cover:before { background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: 50% 50%; } /* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */ .clip-text_one { background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/02/c7/9a/40/centara-karon-resort.jpg); } .clip-text_two { background-image: url(https://www.omnihotels.com/-/media/images/hotels/pueave/pool/pueave-omni-puerto-aventuras-beach-resort-jacuzzi.jpg?la=en); }
JAVASCRIPT
Expand for more options Login