面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。
まずはhtml
何でもいいので適当なクラスか何かあたえておいてください。
<p class="text-kirinuki">文字の形にきりぬくよ</p>
cssを追加します。
.text-kirinuki {
background: url('画像のパス'.jpg) -160px 250px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 65px;
width: 80%;
margin: 50px auto;
text-align: center;
}
するとこんな感じで切り抜いたようになります。
文字の形にきりぬくよ
背景画像をおいて、
テキスト部分を透過するんですね。
font-sizeやmargin,paddingはお好みでどうぞ。
背景にグラデーションを指定するとこんな感じに。
ページのタイトルなどポイントで使えそう。
文字の形にきりぬくよ
テキストの背景指定も
クラス指定したテキストを div などで囲えばテキストの背景指定もできます。
色々使えそう。
文字の形にきりぬくよ
