CSS3によるタイポグラフィ

ドロップシャドウを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキストとその背景に、ドロップシャドウを加えます。
講師:
07:33

字幕

このレッスンでは テキストやその背景に ブロックシャドウ 影を付けてみたいと思います 今ブラウザで開いている HTML ドキュメント 「HOTROD」という文字 この文字の一つ一つに 左上の方に黒い影が― ちょっと見にくいかも しれませんが付いています また背景の方も 左下の方にうっすらと影が付いています ちょっと拡大してみましょう 拡大はショートカットが command もしくは ctrl + ですので これを使ってもっと大きく拡大しましょう これが最大の様なんですけれども スクロールして見てみますと テキストは白い文字ですけれども 左上の方に影が付いていますね 少し濃いめの 幅が狭い影です それに対して背景の方は 左下の方に少しぼけた影が付いています こうした影を この文字 背景に設定したいと思います Dreamweaver CC で開いたこの HTML ドキュメントなんですが こちらには まだ文字や背景に影が付いていません jquery のプラグイン lettering.js を使って jquery の javascript コードで 「hotrod」という class に対して lettering というメソッドで 「hotrod」の要素を スパン要素で一文字ずつ切り分けています ではこの hotrod という class は どこに設定されているかというと 下にスクロールしていくと body の中の一個だけある p 要素 これが class hotrodになっていて テキストはそのまま hotrod という 文字が打ってありますので これが一文字ずつスパン要素に 切り分けられているという事です そしてその hotrod の スパン要素に対して グラデーションとかその他の 設定がしてあるんですが まだドロップシャドウの設定がありません 今現在の状態を確認しましょう ファイルメニューのブラウザーでプレビューです 背景には赤から茶色の グラデーションがかかっています 文字は白く そして背景にはちょっと太い ボーダーが付いていますね でも影が付いていませんので 影を順につけていきましょう まずはテキストから影を つけていきたいと思います セレクターは class hotrod の スパン要素に対してですね ここにテキストのシャドウを加えましょう プロパティは text-shadow です この値の設定の仕方はまず 数値二つで X方向のズレ Y方向のズレ 影ですから少しズレているわけですね ではこれをちょっとだけ左にということで 左はマイナスになります -1px 今度は Y方向 上へという場合には やはり -1px です そして3つ目も数値になります どれぐらいぼかすか 2px ぼかしましょう そして影 これは黒をベースとした α 付きの影にしますので rgba カーソルで 設定することにします 黒ですから RGB はいずれもゼロですね そして α はというと 60% 比率でいうと0.6で設定したいと思います ではこれを一旦保存して ブラウザーでプレビューしましょう 文字の左上に影がつきました また一回確認して見ましょうか 拡大して こんな感じですね 左上の方に黒い影が 少し細めに付いてます ではまた Dreamweaver CC に戻ります 影が付くとちょっと立体的に見えますけれども その影の厚みを増すというやり方もあります その場合には 影はカンマ区切りで 複数つけられますので では― この影を 基本的には コピーして借りてしまいます ただし null をもう少し増やします 3px 3px そしてぼかしも倍にします 影は少し薄めにしましょう これで影が細めの濃い影と もう少しぼけた薄めの影 そして幅が少し増えていますので 厚みが増すという感じになります ではここでまた保存して見てみましょう ファイルを保存したら ブラウザーでプレビューです ちょっと影の厚みが増しましたね また拡大して確認してみます 少し浮き出てる感じが 強まったんじゃないでしょうか ではまた Dreamweaver CC の方に戻ります 今回の作例では文字の影は そんなに強める必要はないので 一旦除いて一個だけの影にしておきましょう そして今度は背景の方に影をつけます 背景の方の影は box-shadow になります box-shadow で 構文は一緒です 左に 2px 少し文字よりは多めにしました そして今度は下に 7px これもやはり多めですね ぼかしは 9px いずれも多めになります そして影は同じく rgba です そして黒をベースにしますので RGB は 000 ですね そして少しうっすらとした感じ 気持ちですので 0.5とします ではこれで確認してみましょう ファイルを一旦保存して ブラウザーでプレビューします これで 背景の方も左下に影が 文字よりはうっすらと幅広く 付くようになりました このレッスンではテキストと 背景にドロップシャドウ 影を付けました テキストの方は text-shadow プロパティ 背景の方は box-shadow プロパティで 文法 構文としてはXY方向のズレ ぼかし幅 そして影の色ということで設定します

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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