CSS3の基本 - レベルアップCSS

テキストのドロップシャドウ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストにドロップシャドウを指定するには、text-shadowプロパティを使います。ここでは、text-shadowプロパティの使い方について紹介します。
講師:
04:12

字幕

テキストにドロップシャドウを指定するにはtext-shadow プロパティを使います。このレッスンでは text-shadow プロパティの使い方について紹介します。画面では左側に HTML と CSS の編集画面を、右側にその結果を表示するウェブブラウザを開いています。早速冒頭の header 要素、見出しとp 要素を含む header 要素に対してテキストにドロップシャドウを付けてみましょう。CSS を書いていきます。header 要素に対して text-shadowプロパティを使います。text-shadow プロパティはいくつかの値を指定しますので順に紹介しておきます。1つ目の値は横オフセットです。横オフセットはシャドウの水平方向に対する距離を指定します。ここでは 5px を指定します。なおここではマイナスの値を指定することもできます。プラスの値では水平方向に右。マイナスの値では水平方向に左にオフセットされます。続いて2つ目の値では垂直方向のオフセットを指定します。ここでは水平方向と同じように 5px を指定します。垂直方向も水平方向と同じようにプラスとマイナスの値が使えプラスの値を使うと垂直方向の下方向、マイナスの値を使うと垂直方向の上方向に影がオフセットされます。 3つ目の値はぼかし・ブラーの指定です。ここでは 8px 分だけ影をぼかすようにします。4つ目の値は影の色です。ここでは rgba 関数を使って薄い黒を指定しましょう。不透明度には 0.5 50% を指定します。ウェブブラウザを見ると header 要素の文字の右下に黒の薄くぼけたドロップシャドウが追加されていることが分かります。またドロップシャドウはオフセットの値を垂直方向・水平方向両方を 0 にすることでグローのような効果を使うこともできます。ここではぼかしを増やして透明度の値を 1 にすると文字の回りにグロー・光彩が入ったように効果を付けることができました。また text-shadow プロパティでは複数の値をカンマで区切ることで一度に複数のドロップシャドウを付けることもできます。値を適当な値に変更して複数の値を指定してみましょう。この値をコピーしそしてカンマで区切った後にペーストします。これでは1つ目と2つ目の影の指定が全く同じですので2つ目の影のオフセットを少し変えてみましょう。5px から 10px に。そして色も黒から赤の影。ぼかしも 8px から少し多い 16px に変えてみます。 ウェブブラウザを見ると元々あった黒のドロップシャドウに加えて赤のドロップシャドウも同時に適用されていることが分かります。このレッスンではテキストにドロップシャドウを指定するためのtext-shadow プロパティの使い方について学びました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

2時間21分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月06日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。