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

要素ボックスに角丸とドロップシャドウを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
四角い要素ボックスの角に丸みを与え、ドロップシャドウも加えます。
講師:
03:41

字幕

このレッスンでは 要素のボックスの 角に 丸みを与え さらに ドロップシャドウも加えてみます 今画面に出ているのは 開いたメニュー まだアニメーションがついていない メニューなんですけれども そのレイアウトとして デザインとして角に 丸みを与えています 角が丸くなっていますね それからうっすらと右下に 影が出ています まだ この角丸と影の与えられていない HTMLドキュメントを開いて この二つの設定をしてみましょう HTMLドキュメントを開きましたので まず ボディー要素から確認しましょう メニュー全体は ul 要素で囲んでいまして クラスは「メニュー」とつけてあります ですので セレクターの メニューとここに 設定を付け加えることになります まずは角丸からいきましょう 角丸のプロパティは 「ボーダーラディウス」です そして角丸の半径を設定します 20ピクセルとしましょう ではまず この状態で確認をします ファイルを保存しまして ブラウザーでプレビューします グーグルクロームで見てみましょう 角が丸くなりましたね まだ影がついていません 影を次に加えます ではまたドリームウィーバーに戻ります ドロップシャドウを加えるセレクターも やはりクラス メニューです 今ボーダーは1ピクセル ソリッド ダークグレイと ゆうふうについていますがその外側に ドロップシャドウをかけます ドロップシャドウの プロパティはボックスシャドウです そして 値としては まず影のズレ x 方向 y 方向です x 方向には 0ピクセルとしましょう ズレなしです 垂直 つまり y 方向に 4ピクセルずらします 三つ目はぼかし幅です 少しぼけをつけますので10ピクセル それからカラーなんですけども 黒をアルファーをつけて 設定する場合には rgbaという設定なんですが 今回背景を特に 透かす必要はないので グレイを設定してしまいましょう 明るめのグレイです ダークグレイと これで保存をしてみます ではブラウザーで確認してみましょう ブラウザーでプレビューで グーグルクロームです うっすらと影がつきました ちょっと見にくいかもしれませんので 拡大してみましょうか もう一個拡大します 右下に影がついてると ゆうことが確認できるかと思います このレッスンではメニューの要素ボックスに 二つ手を加えました メニューのul要素は クラス メニューと ゆう名前が定められていますので このセレクターに対して 角丸は「ボーダーラディウス」です 値としては その丸くする半径を指定します もう一つ ボックスシャドウ でシャドウを加えました この値というのは x 方向のズレ y 方向のズレ ぼけ幅 カラーということになります

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

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

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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