WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

テキストを画像でくり抜く

f:id:mmmmofu:20170216001535p:plain

http://efu.sakura.ne.jp/web/cliptext/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CLIP TEXT</title>
  <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Emilys+Candy" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="text_area text_area01">
    <div class="cliptext">Aclonica</div>
  </div>
  <div class="text_area text_area02">
    <div class="cliptext">Fredericka the Great</div>
  </div>
  <div class="text_area text_area03">
    <div class="cliptext">Emilys Candy</div>
  </div>
</body>
</html>

CSS

@charset "utf-8";

.text_area .cliptext {
  width: 960px;
  margin: 50px auto 0;
  font-family: 'Aclonica', sans-serif;
  text-align: center;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
}

.text_area01 .cliptext {
  font-family: 'Aclonica', sans-serif;
  background-image: url(ph01.jpg);
  font-size: 120px;
}
.text_area02 .cliptext {
  font-family: 'Fredericka the Great', cursive;
  background-image: url(ph02.jpg);
  font-size: 90px;
}
.text_area03 .cliptext {
  font-family: 'Emilys Candy', cursive;
  background-image: url(ph03.jpg);
  font-size: 120px;
}

background-clip: textと記述し、文字色をtransparentにすると背景画像が文字でくり抜かれる。