面白かったのでメモ。
テキストの形に切り抜くやつです。
どこかで使えそう。
まずはhtml 。
何でもいいので適当なクラスか何かあたえておいてください。
|
1 |
<p class="text-kirinuki">文字の形にきりぬくよ</p> |
cssを追加します。
|
1 2 3 4 5 6 7 8 9 10 |
.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 などで囲えばテキストの背景指定もできます。
色々使えそう。
文字の形にきりぬくよ
