CSS3のアニメーションテクニック

テキストに輝いている効果を与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
影を組合わせて使うことで、テキストが輝いているような効果が与えられます。
講師:
04:24

字幕

このレッスンでは影を使って テキストにイルミネーションが 輝いているような効果を与えます 黒バックに白いフォントですから 白い影を付ければいいと思うかもしれません けれど影は組み合わせることにより もっと繊細な表現ができます Dreamweaver で開いているのは まだテキストに輝きの影を付ける前の html ドキュメントです テキストは div 要素のなかの p 要素に設定されています そして黒バックに見えましたけれども 実は完全な黒ではないです フォントは Monoton という ウェブフォントを使いまして カラーは白です 現在の状況を確認しましょう ファイルメニューから ブラウザーでプレビューします 黒バックに白い Monoton font のテキストが表れています ではこれに輝いているような影を付けましょう Dreamweaver に戻ります まずはテキストに白い影を追加しましょう div 要素のセレクターで text-shadow ですね プロパティは そしてずれはなしです X Y とも ずれはなしで ぼけ幅は 80px としましょう かなりぼやっとした感じですね そして色は white です これで確認してみたいと思います ファイルを保存して ブラウザーでプレビューします うっすらと白い影が付きました でも輝いているというには ちょっとインパクトが足りません 影を加えていきましょう text-shadow プロパティに ,(カンマ)区切りで 影はいくつでも加えることができます ではやはり X Y のずれは 0 ぼけは少し狭めまして 30px とします 色はというと green にします これで確認してみましょう ファイルを保存したら ブラウザーでプレビューです 変わったような 変わらないような と思われるかもしれません そのために先程の画面も残してありますので 比べてみましょう 先程がこちらです うっすらと白い影ですね 今作ったのはこちらです ちょっと黄色みがかかることにより 輝いているという雰囲気が 出たのではないでしょうか さらに影をもう1つ加えてみたいと思います 先程の green の影の後に また ,(カンマ)区切りで やはり X Y のずれは 0 です ぼけ幅はさらに狭めます そして色は blue です どうなるのでしょうか もう一度保存して確認します ブラウザーでプレビューです 先程よりもさらに分かりにくいですね 先程の画面がこちらです そしてそれがこうなったと なかなか分かりにくいかもしれません 拡大しましょう ショートカットは command もしくは ctrl + ですので ショートカットで拡大します 300% これででるでしょうか このフォント隙間が空いているんですよね この隙間のところに ちょっとご注目を下さい 先程はこちらです 隙間のところにも同じように 黄色っぽい影が付いているんですが ブルーの影を狭く入れたことによって この隙間のところ ブルーっぽくなっていますよね その方がフォントとその周りとの メリハリがついています もう一度確認します これが先程です そして今作ったのがこちら ということで 何とか違いがお分かりいただけるでしょうか このレッスンでは影を使って よくグローと言われますけれども 輝いているような効果を付ける 方法をご紹介しました 黒バックに対して まず ぼやっと白い影を付け そこに重ねて少し狭めて green を入れると明るくなり もっと狭めて blue を加えることに よって メリハリを付けたということです

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

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

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

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

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