ここ数年、いくつかの新しい CSS プロパティが追加され、フロントエンド開発者は興味深いテキスト ビジュアルをはるかに容易に作成することができるようになりました。 「

この記事では、background-clip および clip-path プロパティを使用して、5 つの CSS テキスト マスキングおよびクリッピング テクニックについて説明します。 全体的なアイデアは、いくつかのテキストの背後に背景のグラデーションを設定し、背景をテキストの端に「クリップ」することです。

これを実現するには、実際には 4 行の CSS が必要なだけです。

<h1>Gradients</h1>

CSS で、グラデーションの背景を追加しましょう。

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

私のように、CSS グラデーションの構文を正確に覚えられない場合は、coolors.co.

ここで、クリッピングを実行するプロパティを追加しましょう。 background-clip.

Background-clip CSS プロパティは、要素の背景がそのボーダー ボックス、パディング ボックス、またはコンテンツ ボックスの下に広がるかどうかを設定します。 – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

このプロパティで text 値を使用すると、背景のグラデーションがにじみ、テキスト内の背景の端をクリップできます。

最後に必要なプロパティは、テキスト色です。 背景が完全に見えるように、これは透過に設定する必要があります。

h1 {...color: transparent;}

text の値は部分的にしかサポートされていないため、この記事の時点では -webkit 接頭辞は Chrome と Safari で実際に必要とされています。 プレフィックス付きとプレフィックスなしの両方のプロパティを追加することで、Internet Explorer以外のほとんどのブラウザをサポートできるはずです。 IE をサポートする必要がある場合、フォールバックとして非透過のテキスト色を追加し、それを透過色の前に含めることができます。

Check the background-clip docs for complete browser support information.

CSS Animated Gradient Text#

次の効果として、グラデーションにこだわり、テキストの背景としてアニメーション グラデーションを使用しましょう。

<h1>Animated</h1>

CSS:

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

引き続き background-clip プロパティを使用し、前の例と同様にテキスト色を transparent に設定します。

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

最後に、アニメーションのキーフレームを定義し、実際のアニメーションの動きを得るために background-size 値を増加させます。

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

この次の例も、先ほど説明した例と同じようなものになるでしょう。

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

この例では、背景画像が繰り返されず、垂直方向と水平方向の中央にあることを確認したいと思います。

CSS Video Background Text#

さて、次は動画をテキストの背景として使用する方法についてです。 この効果は、h1 の代わりに SVG を使用する点が異なります。

まず、video タグを含む div が必要です。

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

video タグで、いくつかのプロパティを追加します。 loop autoPlay muted playsInline.

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

ここで最も重要なプロパティは clip-path です。

clip-path CSS プロパティは、要素のどの部分を表示するかを設定するクリッピング領域を作成するものです。 領域の内側にある部分は表示され、外側にある部分は非表示になります。 – MDN Docs

SVG を追加した後でもう少し理解できると思いますが、基本的には、url(#videoText) 値によって参照されるように、動画をクリップする領域として SVG パスを使用したいのです。 SVG の作成とエクスポートにはさまざまな方法がありますが、私は通常 Figma または Sketch を使用しています。 本当に必要なのは、選択したプログラムでテキストを追加し、SVG としてエクスポートすることだけです。

私が以下で使用している SVG は、単純化された例です。 あなたのは通常の xmlns, viewBox, path プロパティを持つでしょう。

SVG がエクスポートされたら、いくつか追加するものがあります。

The <clipPath> SVG element defines a clipping path to be used by the clip-path property.A clipping path restrictions to the region which paint be applied.First, we need to add a clipPath element around the path.

SVG 要素は、clip-path プロパティで使用されるクリップ パスを定義します。 概念的には、クリッピングパスで囲まれた領域の外側にある描画の部分は描画されない。 – MDN Docs

At a high level, it is not too different from the background-clip property we used in the previous examples.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

The clipPath element should have an ID that match one we added in the CSS.

Element is the ID is the same than one in the CSS.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

Element is the ID as an added in the CSS: videoText. また、clipPathUnits="objectBoundingBox" プロパティと値も必要です。

最後に追加するものは、いくつかの transform 値です。 これらは、追加したCSSでSVG自体の高さと幅を意図的に0に設定しているため、必要です。 そのため、パスが見えるように拡大縮小する必要があります。

拡大縮小の値を導き出すには、1を高さと幅で割ります。 私の例のテキストは幅が 640px で高さが 360px なので :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

欲しい幅と高さに依存して、これを少し試す必要があるかもしれません。

最後に、完成した SVG を .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

最後の例として、色分割テキスト効果を作成することにします。 2267>

まず、h1 が必要ですが、今回はそれに data 属性を追加しています。 その理由はすぐにわかるでしょう。

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

次に、スタイルです。

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

ここで2つの重要な部分があります。 この関数は、選択した要素から属性を取得し、その値を CSS で使用できるようにします。 この例では、追加したdata-text属性をcontentプロパティで使用できるようにしたいのです。 これで、元の h1 と psuedo 要素の 2 つのテキスト要素を扱うことができるようになりました。 前の例では、このプロパティの値として別の SVG を使用しました。 今回は、polygon形状を使う以外は、似たようなことをしています。 これは、文字色が「分割」されているように見えるものです。 この polygon の形状を使用して、赤い疑似要素テキストをクリップして部分的にしか見えないようにし、絶対位置決めを使って白い h1 テキストの上に配置しています。

最後に、テキストがまだ選択可能であるか確認するための追加事項が1つあります。

h1::before {...pointer-events: none; /* Make text selectable */}

pointer-events プロパティがない場合、疑似要素は実際にテキストの一部が選択されるのを妨げています。 今回取り上げた例は、これらのプロパティを使用してできることのほんの一部に過ぎません。 他のオプションとして、テクスチャ、より精巧な SVG、およびさまざまな種類のアニメーションを使用することができます。