はじめてのCSS3アニメーション

box-shadowプロパティでベベルやエンボスの効果を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
影のつけ方を工夫すると、ベベルやエンボスと呼ばれる凹凸が表現できます。そのためのbox-shadowプロパティの設定の仕方をご説明します。
講師:
10:48

字幕

このレッスンでは いわゆる ベベルと エンボスと 言う効果についてご説明します ベベルと言うのは 出っ張ったような表現で まさに このボタンがそうです ボタンが 少し出っ張って見えますね そして エンボスと言うのは 逆に 引っ込んだ状態です マウスポインターを重ねます そして クリックすると ちょっと 引っ込んで見えますね えー このベベルもエンボスも 影をうまく使って こうした表現にします まずはこの html ドキュメント ベベルもエンボスも設定されていません それを先に確認しておきましょう ファイルメニューから  ブラウザーでプレビューします マウスポインターを重ねると カラーが変わり 影の大きさ も変わってくると言う事で だいぶ表現が加えてあるんですが 先ほどの ベベルとエンボスが加わった 表現と比べると やはり 今ひとつですね これを 設定したいと思いますので また Dreamweaver に戻ります まずは 出っ張った表現 ベベルからです 出っ張らせたいボタン クラス btnの a 要素ですけれども すでに box-shadow は 右下の方に 影が出るように設定してあります ここに さらに影をあと2つ付け加えます 付け加えたい時はですね カンマ区切りにして その後に さらに 同じ設定を 何重にも 加える事が出来ます ここは もう 一旦コピーしちゃいましょう コピーをして ペーストします まだ 設定変えていませんので 全部同じ影になってしまいます が ここは変えて行きます この最後の設定は 元のまま残しておいて 新たに2つ加える と言う事ですね そして 具体的な内容の説明をする前に 値をタイプしてしまって 結果を見てから 中身をご説明したいと思います まず inset とします そして 4 ピクセル 4 ピクセル これは ずれですね 水平 垂直のずれ そして ボケ幅はちょっと 縮めます 4ピクセル です そして rgba なんですが 色を 白にします 白と言うのは 255ですね 255で 設定し アルファはこのままです そして 2つめ これもまた inset です そして x と y ずれですね 影のずれの部分を マイナスの値にします そして ボケ幅は 上と同じ 4 ピクセル ちょっと小さめにします アルファについては こちらは 0.4 ぐらい 少し 透明度 上げます これで 確認してみましょう 一旦 ファイルを保存して そして ブラウザーでプレビューします Google Chrome です 出っ張りましたね 何が行われたかと言うと この上の方に うっすらと 重ねちゃうと  分かりにくいかもしれませんね えー 上と左に 白い影が内側にかかってます 今度は 下と右 黒い影が内側にかかってる 影を内側にかけると言うのが ポイントになります では 何であの設定で内側にかかったのか もう一度確認しながら  ご説明して行きましょう Dreamweaver に入力した設定を もう一度見てみます 値の細かい変更は別にして 大きいのは この inset と言う キーワードが入ったところですね そして これが白ですので この設定が 上と左に 付いた白い影だと 言う事は見当が付くかと思います それから マイナスの値を設定しています これは黒ですから 右と下に付いた 影 の設定です と言う事は このマイナスを作る事によって 下に 右下に付いて プラスの場合には 左上に付いた と言う事が 何となく 見当できるでしょう やはり こう言う時は念のため CSSリファレンスを確認しておく事にします MDN の CSS リファレンスで box-shadow の項目を開きました この 構文を見てみると none 何もしていらない場合 普通の場合ですね  これは普通のドロップシャドウになります 指定がない場合には 普通のドロップシャドウ しかし 先頭に inset と 打つと その影が ボックスの内側に付くんですね ですから 白い影も 黒い影も 内側に付いたと言う事になります それから 影の offset x と offset y これをマイナスにすると 通常とは逆側に影が付きます 通常のドロップシャドウは 右下に 外に付くんで マイナスにすると 左上に付きます ところが inset の場合 通常の影と言うのは 左上に付く事になるので マイナスにしてあげると 右下に 黒い影が付いた と言う事になります ではもう一度  Dreamweaver の方を見てみましょう セレクター btn クラスの a 要素に付けた 2つ追加した影ですね これは2つとも inset になっていますから ボックスの内側に付きます そして プラスの場合には inset は 左上に 白い影が付いたと 言う事ですね そして マイナスの場合 これは inset ですから 右下に 黒い影が付きました せっかくですから マウスポインターを重ねた hover 類似クラスの場合 こちらにも 少し設定を変えて同じような ベベルを付け替える事にしましょう コピーしてしまいます コピーして ここに ペーストと 改行しときましょう そして 影は少し inset の影は 少し縮めます と言う事なのでここは 2にして 2にして Bokeh幅は 同じにしておきます それから 黒い 下側ですね 右下側も 2にしておきます ボケ幅は同じ 4ピクセルです その他  カラーに付いても変えてありません これで マウスポインターを重ねた場合 少し 違った状態に影が変わります ま 影が少し縮むと言う事ですね 保存してみましょう そして ブラウザーでプレビューします 出っ張ってる状態は  先ほどと変わりません けれど マウスポインターを重ねた時 外側の影が 黒く縮みました それに加えて今回は ベベルの方も 縮むんですね ですから ボタンが少し 高さが 縮んだような感じに 映るかと思います そしてクリックしても こちらは ベベルが取れてしまいます と言うのは アクティブの 擬似クラスの設定をしてません それに 押した時は ベベルじゃなくて エンボスにしたいです ですのでそちらの設定を また Dreamweaver の方で 行う事にしましょう ボタンを押した状態は アクティブ擬似クラスです さて こちらも すでに設定してあるものを コピーして使ってしまいます コピーしまして ここに ペーストです ちょっとインデントを揃えましょう そして この影を 逆にします 逆と言うのは 上の方の 白い影 えー こちらをマイナスにします マイナス 2 ピクセル マイナス 2 ピクセル 4 ピクセル で 白ですね と言う事は 白い影が 右下に移りました そして こちらも逆にして 今度は プラスの 2 ピクセル プラスの 2 ピクセルで 黒い影です 黒い影が左上に移ります では ファイルを保存して 確認してみましょう ブラウザーでプレビューです マウスを重ねると ボタンが少し 縮みます そしてマウスボタンを押すと へっこんでるように見えますね なぜ へっこんでいるように見えるかと言うと 左上に黒い影 右下に白い影が付いた と言う事ですね もうちょっと拡大してみましょうか 拡大 ショートカットは command+ Mac の場合 Windows では Control+ ですので 上で どんどん拡大します これが 最大ですね ポインターを重ねます ボタンがちょっと 高さが 縮みます 影も縮みます 押すと へっこんでいるように見える まあ 見えないかもしれませんけど 言われれば 何となく そんな気がしてくると 言う感じですね では 表示を元に戻しましょう このレッスンで学んだのは ベベルとエンボスと言う効果です ベベルと言うのは 出っ張った状態 エンボスは へっこんだように見えると 言う状態です いづれも box-shadow 影をうまく使って 行いました inset にすると 影が 内側に付く訳ですね そして 内側に付けた場合に そのピクセルが プラスであると 左上にその影が付く マイナスであると 右下に影が付く x y がマイナスの場合ですね ですから 出っ張らせたい時には 上に 左上に白 右下に黒を持って行けば 出っ張ってるように見える 逆に 左上に 黒 プラスの場合ですね マイナスの場合 右下に 白を持って行くと エンボス へっこんでいるように 見えると言う事です こうすると だいぶ ボタンらしく なったのではないでしょうか

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

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

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

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

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