CSS パターン
テキストまたはテキストの背景
text-stroke:
テキストのアウトライン
text-shadow
テキストのシャドウ
filter: drop-shadow
テキストのシャドウ
box-shadow
要素のフレームの周囲にシャドウ効果を追加
従来 photoshop で加工していたものが CSS で実現できるようになった。テキストで背景を文字形に切り抜いてアウトラインやシャドウを加える、そのテキストの背景にも手を加えてみよう。
<div class="background">
<div class="pattern">
<h2>ボーダーゼロ</h2>
</div>
</div>
背景を文字形に切り抜く手順は以下であり非常に簡単だ。切り抜いた文字に宛がう画像の選択の方が苦労を強いられるかもしれない。
.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);
}
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;
}
<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 で作るには以下リファレンスが詳しい。
reference
<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;
}
<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 の順の表示である。
「filter: drop-shadow」は「filter」プロパティの中の「drop-shadow」という値をとり、より高度な設定ができる。
<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」を比べてみる。この場合、同一である。
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()