イントロダクション
「ブログの文字に影をつけたい!条件を設定すれば簡単に影付き文字を作れる「CSS3 Text Shadow Generator」が便利！」では、スタイルシートのtext-shadowの設定をマウス操作だけで作成できるWebサービスについてご紹介しました。その時に、スタイルシートの text-shadow について詳しく調べていたのですが、この text-shadow では、複数の影をまとめて指定できるのですね！
text-shadow - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow
2/2 文字に影を付け、画像に重ねた文字を見やすくするCSS3 [ホームページ作成] All About
http://allabout.co.jp/gm/gc/384274/2/
text-shadow－CSS3リファレンス
http://www.htmq.com/css3/text-shadow.shtml
https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow
2/2 文字に影を付け、画像に重ねた文字を見やすくするCSS3 [ホームページ作成] All About
http://allabout.co.jp/gm/gc/384274/2/
text-shadow－CSS3リファレンス
http://www.htmq.com/css3/text-shadow.shtml
スタイルシートのtext-shadowでは、複数の影を指定できる!
text-shadow の設定値として、一つの影を表現する一連のパラメータがあります。text-shadow : 一つの影を表現する一連のパラメータ;
複数の影を適用する場合には、一つの影を表現する一連のパラメータをコンマ(,)で区切って、一つの影を表現する一連のパラメータを追加していけばよいのです。
text-shadow : 一つの影を表現する一連のパラメータ, 一つの影を表現する一連のパラメータ;
このように、一つの影を表現する一連のパラメータをコンマ(,)で区切っていけば、いくらでも別のパラメータを持つ影を特定の文字に対して適用できます。
MDN(MOZILLA DEVELOPER NETWORK)の text-shadow の説明には、次のような記述があります。
Gecko (Firefox) は理論上は無限個の影をサポート (試さないでください！) し、CSS3 の描画順序を守っています (最初に定義された影が 上 にきます)。
ただし、無限個の影がサポートされているからと言って、影を追加すればするほど、ページを描画するための負荷（画像処理のプログラムを作られたことがある人や、画像処理ソフトでぼかし処理を使ったことがある人はその重さを実感されていると思います。）が増加するので、大量の影を追加するのは、ページを閲覧する快適さを阻害してしまいます。
その点には注意して、用法・容量を守って、正しく使っていきたいところです。
複数の影を使った面白い文字の表現
複数の影を使った面白い文字の表現を見ていきましょう。白抜き文字
白文字を、黒枠で縁取った表現です。Dr.ウーパのコンピュータ備忘録
ソースコード：
<span style="color: white; font-size: 2.5em; text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) -1px 0px 0px, rgb(0, 0, 0) 0px 1px 0px, rgb(0, 0, 0) 0px -1px 0px;">
Dr.ウーパのコンピュータ備忘録
</span>
重要なスタイルシート部：
color: white;
文字の色を白にしています。
text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) -1px 0px 0px, rgb(0, 0, 0) 0px 1px 0px, rgb(0, 0, 0) 0px -1px 0px;
上下左右に 1px ずつずらして影を作成しています。
これによって、文字の枠を作成しています。
アニメーションで適用されている影を個別に見てみよう！
適用している影を一つずつ、アニメーションで表示しています。
Dr.ウーパのコンピュータ備忘録
備考：
文字の色、文字枠の色、文字枠のぼかし、文字枠の太さなど、スタイルシート部を変更することでいろいろな表現が可能になります。
文字の影の色が遠くなるにつれて変化する
文字の影の色が、文字からの距離が遠くなるにつれて変化します。Dr.ウーパのコンピュータ備忘録
ソースコード：
<span style="font-size: 2.5em; text-shadow: rgb(255, 0, 0) 0px 0px 3px, rgb(0, 255, 0) 0px 0px 6px, rgb(0, 0, 255) 0px 0px 9px;">
Dr.ウーパのコンピュータ備忘録
</span>
重要なスタイルシート部：
text-shadow: rgb(255, 0, 0) 0px 0px 3px, rgb(0, 255, 0) 0px 0px 6px, rgb(0, 0, 255) 0px 0px 9px;
赤の影をぼかし 3 px で指定し、緑の影をぼかし 6 px で指定し、青の影をぼかし 9 px で指定しています。
アニメーションで適用されている影を個別に見てみよう！
適用している影を一つずつ、アニメーションで表示しています。
Dr.ウーパのコンピュータ備忘録
備考：
この例では、赤→緑→青の順で影の色が変化しています。
影の色や、変化する距離を変えることで、いろいろな表現が可能になります。
複数の光源から光を受けた場合の影
位置の異なる複数の光源から光を受けたような影を作ることができます。Dr.ウーパのコンピュータ備忘録
ソースコード：
<span style="font-size: 2.5em; text-shadow: rgb(170, 170, 170) 16px 0px 8px, rgb(170, 170, 170) -16px 0px 8px, rgb(170, 170, 170) 0px 16px 8px, rgb(170, 170, 170) 0px -16px 8px;">
Dr.ウーパのコンピュータ備忘録
</span>
重要なスタイルシート部：
text-shadow: rgb(170, 170, 170) 16px 0px 8px, rgb(170, 170, 170) -16px 0px 8px, rgb(170, 170, 170) 0px 16px 8px, rgb(170, 170, 170) 0px -16px 8px;
影を色(rgb(170, 170, 170))、ぼかし8px, 距離前後左右16px で作成しています。
アニメーションで適用されている影を個別に見てみよう！
適用している影を一つずつ、アニメーションで表示しています。
Dr.ウーパのコンピュータ備忘録
備考：
影の色や、ぼかし、距離を変えることで、いろいろな表現が可能になります。
燃えているような文字
文字が燃えて、炎が出ているような効果を影で作ることができます。Dr.ウーパのコンピュータ備忘録
ソースコード：
<span style="color: white; font-size: 2.5em; text-shadow: rgb(255, 255, 255) 2px -4px 8px, rgb(255, 255, 0) -4px -8px 10px, rgb(255, 0, 0) 6px -12px 12px, rgb(255, 0, 0) -8px -16px 14px;">
Dr.ウーパのコンピュータ備忘録
</span>
重要なスタイルシート部：
color: white;
文字を白くしています。
text-shadow: rgb(255, 255, 255) 2px -4px 8px, rgb(255, 255, 0) -4px -8px 10px, rgb(255, 0, 0) 6px -12px 12px, rgb(255, 0, 0) -8px -16px 14px;
燃えているような影を作るために、文字の上側に赤と黄色のぼかした影を作成しています。
アニメーションで適用されている影を個別に見てみよう！
適用している影を一つずつ、アニメーションで表示しています。
Dr.ウーパのコンピュータ備忘録
備考：
影の色や、ぼかし、距離を変えることで、いろいろな表現が可能になります。
テカりのある3Dっぽい文字
黒い3Dっぽい文字に、白いテカりが入っているような表現です。Dr.ウーパのコンピュータ備忘録
ソースコード：
<span style="font-size: 2.5em; color: black; text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(255, 255, 255) -2px -2px 0px, rgb(0, 0, 0) -3px -3px 0px, rgb(0, 0, 0) -4px -4px 0px, rgb(0, 0, 0) -5px -5px 0px, rgb(0, 0, 0) -6px -6px 0px;">
Dr.ウーパのコンピュータ備忘録
</span>
重要なスタイルシート部：
color: black;
文字を黒くしています。
text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(255, 255, 255) -2px -2px 0px, rgb(0, 0, 0) -3px -3px 0px, rgb(0, 0, 0) -4px -4px 0px, rgb(0, 0, 0) -5px -5px 0px, rgb(0, 0, 0) -6px -6px 0px;
3D のような影を作るために、1px ずつぼかさない影を左上にずらして描画しています。
アニメーションで適用されている影を個別に見てみよう！
適用している影を一つずつ、アニメーションで表示しています。
Dr.ウーパのコンピュータ備忘録
備考：
影の色や、ぼかし、距離を変えることで、いろいろな表現が可能になります。
まとめ
ご覧いただけたように、スタイルシートのtext-shadowにて、複数の影を指定することで、表現の幅が大きく広がっていることが分かります。これ以外にも、工夫次第で面白い効果を適用した文字を作成できます。
是非、いろいろな効果を作ってみてください。
コメントを投稿
コメント投稿機能について