text

background-clip: textで背景を文字形に切り抜く

─ Guide to page sections ─

テキストで背景を文字形に切り抜いて、そのテキストの背景にも手を加えてみよう
テキストで背景を文字形に切り抜いて、アウトラインと影とその他、手を加えてみよう

従来 photoshop で加工していたものが CSS で実現できるようになった。テキストで背景を文字形に切り抜いてアウトラインやシャドウを加える、そのテキストの背景にも手を加えてみよう。

First

background-clip: text プロパティで背景を文字形に切り抜く

ボーダーゼロ

<div class="background">
  <div class="pattern">
    <h2>ボーダーゼロ</h2>
  </div>
</div>

背景を文字形に切り抜く手順は以下であり非常に簡単だ。切り抜いた文字に宛がう画像の選択の方が苦労を強いられるかもしれない。

　　　　
文字の色を透明にする。
color: rgba(0,0,0,0);
切り抜いた文字形に宛がう画像を設定する。
background-image: url(images/polka-dot-6.jpg);
背景を文字形に切り抜く。
-webkit-background-clip: text;
背景の色を設定する。
background-color: #0463a6;

.background {
  background-color: #0463a6;
  width: 100%;
  margin: 0 auto;
}
.pattern {
  display: flex;
  width: 100%;
  margin: 0 auto;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url(images/polka-dot-6.jpg);
  justify-content: center;
  align-items: center;
  background-size: contain;
  height: 100px;
  line-height: 100px;
}

.pattern h2 {
  text-align: center;
  font-size: 5vw;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  margin: 0;
  color: rgba(0,0,0,0);
}
Second

テキストの背景に CSS で作ったパターンを加えてみる

CSS で柄のパターンを作ってみる。そしてこれを使うターゲットは文字の背景や文字自体である。

ボーダーゼロ

<div class="diagonal">
  <div class="pattern">
    <h2>ボーダーゼロ</h2>
  </div>
</div>
.diagonal {
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(45deg, #474747 0, #474747 2px, #262626 0, #262626 50%);
  margin-bottom: 16px;
}

テキストに CSS で作ったパターンを加えてみる

ボーダーゼロ

<div class="background">
  <div class="txt_pattern">
    <h2 class="moji">ボーダーゼロ</h2>
  </div>
</div>

テキストに CSS で作ったパターンを入れ込んだ例だ。文字を入れる <h2> タグを覆う <div class="txt_pattern"> に以下の設定をする。

.txt_pattern {
  width: 100%; 
  margin: 0 auto; 
  background-clip: text; 
  -webkit-background-clip: text; 
  background-color: transparent; 
  background-image: radial-gradient(#fff 1px, transparent 1px); 
  background-size: 2px 2px;
}

CSS で作ることができるパターンは、方眼紙、ひし形、ジグザグ、水玉模様、ボーダーなど多数有る。

※背景の柄を CSS で作るには以下リファレンスが詳しい。

使える背景パターン、実装サンプル25選

reference

Third

テキストの背景にイメージを配置する

ボーダーゼロ

<div class="bg_image">
  <div class="pattern-2">
    <h2>ボーダーゼロ</h2>
  </div>
</div>

「background-clip: textで背景を文字形に切り抜く」場合、「background-clip: text」の影響を受けない、ここの例では「<div class="bg_image">」にて背景画像の配置の設定を行う。

背景画像が読み込まれないと、テキストが読めなくなることがある。これを防ぐために、代替の background-color を追加し、画像なしでテストする準備が必要だ。

.bg_image {
  display: flex;
  background-image: url("images/olive.jpg");
  background-repeat:no-repeat;
  background-size: cover;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: #000;
  opacity: 1;
  z-index: -1;
  margin-bottom: 16px;
}

Fourth

text-stroke: プロパティを使ってテキストのアウトラインを出す

ボーダーゼロ

<div class="bg_image">
  <div class="pattern-2 outline">
    <h2>ボーダーゼロ</h2>
  </div>
</div>
.outline {
  text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}

text-stroke プロパティは文字の輪郭線の幅と色を指定することができる。 構文は、線の幅・線の色の順番に指定する。以下は線の幅が、1px、2px、3px の順の表示である。

ボーダーゼロ

ボーダーゼロ

ボーダーゼロ

Fifth

filter: drop-shadow プロパティを使う

ボーダーゼロ

「filter: drop-shadow」は「filter」プロパティの中の「drop-shadow」という値をとり、より高度な設定ができる。

  • 「値」は、drop-shadow( )の中に記述する
  • 「広がりサイズの指定」はできない
  • 「内側指定」はできない
  • 要素の描画内容1(ビットマップやSVGといった画像・テキストなど)に合わせた影を生成
  • ぼかし(blur)を設定することができる
  • 影をつける位置を横・縦方向で指定でき、マイナス指定も可
  • 影の色・透明度を指定できる
  • スペースで区切ることで複数の影を設定することができる
<div class="bg_image">
  <div class="pattern-2 drop-shadow">
    <h2>ボーダーゼロ</h2>
  </div>
</div>
.bg_image {
  background-image: url("images/olive.jpg");
  background-repeat:no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 120px;
  background-color: #000;
  opacity: 1;
  z-index: -1;
  margin-bottom: 16px;
} 
.pattern-2 {
  width: 100%;
  max-width: 800px;
  min-width: 220px;
  margin: 0 auto;
  font-weight: 900;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.2;
  color: rgba(0,0,0,0);
  background-clip: text;
  -webkit-background-clip: text;
  background-image: url(images/cercle.jpg);
  background-color: red;
  background-size: contain;
}
.drop-shadow {
  filter: drop-shadow(3px 3px 3px #000) drop-shadow(0px 6px 3px #29191e);
}

CSS パターン

テキストまたはテキストの背景

text-stroke:

テキストのアウトライン

text-shadow

テキストのシャドウ

filter: drop-shadow

テキストのシャドウ

box-shadow

要素のフレームの周囲にシャドウ効果を追加

Font Awesome アイコンフォントを用いて複数の影をぼかし無しで表示してみよう。filter: drop-shadow はその特性上、要素ではなく「形」に対して働く。これは、重なった分は「重なって」表示される box-shadow や text-shadow と決定的に異なる点である。

「filter:drop-shadow()」と「text-shadow」を比べてみる。この場合、同一である。

filter:drop-shadow()で文字に半透明のシャドウをかける

text-shadowで文字に半透明のシャドウをかける

text-shadow を使った版ズレのデザインの例。

ボーダーゼロ

drop-shadow() 関数は <shadow> 型の引数 (box-shadow プロパティで定義) を受け付けるが、 inset キーワードと spread 引数が許可されないという例外がある。

「box-shadow」と「filter: drop-shadow()」を組み合わせてみる。

box-shadow 
<blockquote style="padding: 20px; height: 100px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0  0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(2,0,0,0.3);">
  <q>box-shadow</q>
</blockquote>
box-shadow + filter: drop-shadow() 
<blockquote style="padding: 20px; height: 100px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0  0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(2,0,0,0.3); filter: drop-shadow(5px 5px 5px rgba(0, 0, 0,0.3));">
  <q>box-shadow + filter: drop-shadow()</q>
</blockquote>
box-shadow + filter: drop-shadow()