clip text

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<h1 class="h1">clip text</h1>
<div class="wrap">
  <div class="inner" id="js-query-action">
    <section class="section">
      <figure class="clip">
        CLIP TEXT
      </figure>
    </section>
  </div>
</div>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">

SCSS

body {
	width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1.2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding-right: 1em;
  padding-left: 1em;
	min-width: 300px;
}

.section {
  max-width: 480px;
  padding: 1em;
  border: 6px double currentColor;
  background-color: rgba(white,.5);
}

.clip {
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: url("https://c1.staticflickr.com/1/361/19427534675_ffc194fddf_o.jpg");
  color: transparent;
  font-size: 8em;
  line-height: 1.05;
  font-weight: bold;
  text-align: center;
}

Babel + JSX

// clip text
// - - - - - - - - - - - - -