CSSでメニューボタンをよりボタンらしくしてみた
久しぶりにブログを変化させてみた。
といってもメニューバーや見出しのCSSをいじっただけだが。
とりあえずどこを変えたのか書こうと思う。
ボタンに影を付ける
まずは”これはボタンです”という存在感を出すために影を付けてみた。
See the Pen LNNrKp by minami (@o) on CodePen.
box-shadowというプロパティで影の幅と色を指定する。
box-shadowは4種類の数値を指定することができる。
1つ目は右方向の影の太さ・・・数値が大きくなるほど太くなる
2つ目は下方向の影の太さ・・・数値が大きくなるほど太くなる
3つ目は影のぼかし度合・・・数値が大きくなるほどぼかしが強くなる
4つ目は影の広さ・・・数値が大きくなるほど広がる。負の数値は指定できない。
影は色を指定することができる。
なにも指定しない場合は真っ黒の影となる。
また、box-shadow:5px 5px #ccccc inset; のように最後にinsetと追加すると外側ではなく内側に影を表示させることができる。
もっとわかりやすく解説しているサイトがあるのでそちらを紹介しよう。
ボタンをスイッチのように見せる
今まではカーソルをボタンの上に持っていくと色がピンクに変化するようにしていたが今回からは押し込めるように変えてみた。
See the Pen EKKREM by minami (@o) on CodePen.
変わったところは:hoverのところだ。
まずはpositionのプロパティをrelativeと指定する。
positioinプロパティの値も4種類あるが、基本的にはrelativeを使えばいいらしい。
top:3px; と left:3px; というのはカーソルをボタンの上に乗せたとき、上から3px、左から3pxボタンが動く、という設定だ。
もちろんtop、leftのほかにbottom、rightも指定できる。
また、ここにはbox-shadowを0pxで指定した。 そうしなければカーソルを上に持ってきたとき影も一緒にずれてしまうからだ。 なのでカーソルを上に持ってきたときは影が消えるよう0pxで追加した。
positionの値も詳しく書かれたところがあったので紹介することにしよう。
ぜひ前回までのメニューボタンとの違いを見比べてもらいたい。
影を付けたことと、マウスオーバーで押し込めるようにしたことでよりボタン感を出せたんじゃないかと思う。
参考までに前回グローバルメニューを作成したときの記事のリンクを張っておくことにする。
あとは見出しを吹き出しのように変えたのだが、これはコピペでできたのでもう少し理解してから記事にしようかと思う。
とりあえず今回はここまで。
まとめ
・影を付けるにはbox-shadowプロパティを使用する。
・box-shadowには影の太さ、ぼかしレベル、広がり、色、影を内側が外側か表示する場所を決めることができる。
・マウスオーバー時、画像やボタンなどをずらすにはpositionプロパティを使用する。
・positionプロパティには値が4種類あるが、基本的にはrelativeを使う。
・ずらす位置はtop、bottom、left、rightと上下左右に指定することができる。
