WebデザイナーのためのCSS3実践講座

シンプルな影の効果

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストに対して、「text_shadow」というCSSプロパティを使ってシンプルな影の効果を付ける方法について、解説致します。
講師:
03:11

字幕

このレッスンでは テキストに テキストシャドー― という CSS プロパーティーを使って シンプルな影の効果を付ける方法について― 解説致します まずはダウンロードしてきた こちらの simple-shadow ― というフォルダーの中に入っているこちらの index.html ファイルと― style.css ファイルを エディッターで開いて下さい そして こちらがそれらのファイルを 開いた状態です そして こちらのブラウザの方には こちらの index.html ファイルを― ブラウザで表示させた状態となっています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルから― みてみましょう こちらに p タグで囲まれた 二つの文章がありますね まず こちらの上の文章に関しては 何もスタイルを付けていない状態 そして こちらの下の p タグに対しては クラス シャドーを付けています このクラスシャドーに対してテキストシャドー という CSS プロパーティーを使って― こちらの中の文章に対して 影を付ける効果を実装しています それを表示させているのがこちらの部分ですね 上がデフォルトの状態 そして 下が影が付いている状態のものですね では こちらの style.css の方を みてみましょう そして 注目して頂きたい部分は こちらの部分となります こちらの p.shadow という 要素に対して― このように text:shadow という プロパーティーを使って― 影を表現しています この text:shadow の値ですが 5 ピクセル 5 ピクセル― 10 ピクセル そして #AAAAAA と書いていますね これは左から順番に影の横方向のずれ 次に縦方向のずれ そして 影のぼかし範囲― そして 最後に影の色を表す カラーコードが記述されている状態となります このようにすることでこちらの部分で 表示されているようなドロップシャドー― のような効果を付けることができるわけですね 勿論 ここに設定されている値以外にも 横方向のずれや 縦方向のずれを― 変更したり ぼかしの範囲を変更したり はたまた 影の色を― 変更したりすることも出来ます これらの値をうまく調節することによって 様々な影の見せ方ができるようになる訳ですね 以上でレッスンは終了です 今回はテキストに対してテキストシャドー という CSS プロパーティーを使って― シンプルな影の効果を 付ける方法について解説致しました 以降のレッスンでは このテキストシャドーを 組み合わせてテキストに― 複数の陰影の効果を付けて様々な見せ方を 作成する方法について解説致しますので― そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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