今回のお題は、サンプル1のように項目を並べたメニューだ。マウスポインタをメニュー項目に重ねると、他の項目のテキストがぼける。また、ポインタを重ねたメニュー項目は浮き上がったり、マウスボタンを押すと凹むようにアニメーションする。CodePenに公開された「Blurry Menu」を参考に、HTMLとCSSのコードの構成を改め、簡潔にした。
メニューのもとになる静的スタイル
まず、<body>
要素に書くコードの構成だ。メニューは、つぎのようにclass
属性が"menu"の<ul>
要素でリストとして組み立てる。メニュー項目をclass
属性"item"の<li>
要素とし、その中の<a>
要素にテキストを加えた。そして、メニューの<ul>
要素全体を、class
属性"container"の<div>
要素で包んでいる。
この<body>
要素の記述に対して、つぎのような<style>
要素を加える。今のところ、メニューは動きのないただのバーで(図1)、マウスインタラクションも加えられていない。なお、CSSにベンダープレフィックスをつけなくて済むように、<script>
要素で-prefix-freeを読み込んだ(第1回の「ベンダープレフィックスと-prefix-free」の項参照)。
メニューの背景色とテキストの影
今回のお題は、さほど目新しい機能は使っていない。細かい使い方の発想や、それらの組み合わせで表現を組み立てている。しかし言われないと気づかないところも少なくない。前掲の<style>
要素の定めでは、メニューバー(class
属性"menu")のbackground
プロパティに、linear-gradient()
関数で線形のグラデーションを加えている。おそらく気づきにくいだろうから、つぎのようにはっきりとした白から黒のグラデーションに変えてみよう(図2)。実は、少し丸く膨らんだような表現にしてあったのだ。
もうひとつ気づくのは、テキストが凹んで見えることだ(前掲図2)。そのためには、下方向に明るい影を入れればよい(第1回の「マウスポインタを重ねたときのボタンの表現」参照)。テキストの影は、text-shadow
プロパティに影の水平・垂直のずれとぼけ幅および色を与えて定める。前掲コードでは、下に1ピクセルのくっきりとした白い影を加えていた。
なお、linear-gradient()
関数の第1引数には、グラデーションの向きが与えられる。これを省くと、デフォルトで上から下のグラデーション(to bottom
)になる。
メニュー項目の間に区切り線を入れる
メニューバーの項目(class
属性"item")の間には区切り線を入れる。ここでも小技を加えて立体的に見せたい。そのためには、プロパティborder-left
とborder-right
で明暗の差をつければよい。まずは、わかりやすく白と黒で太めの線を加えてみた(図3)。
効果が確かめられたところで、改めてつぎのように線は細くし、明暗差をグレーで和らげた。そして、両端の線は擬似クラス:first-child
と:last-child
で指定してなくす(none
)ことにする(図4)。
メニューバーに外枠を加える
メニューを動かす前に、もうひとつだけ飾りつけとして、メニューバーに外枠を加える。もちろん、border
プロパティを用いてもよい。けれど、今回はbox-shadow
プロパティを活用してみよう。影は普通ぼかす。ぼかさないときは、ずらさなければ見えない(前述「メニューの背景色とテキストの影」参照)。けれど、box-shadow
プロパティには、つぎのように伸縮量が値に加えられる(デフォルト値0)。正の値を与えれば、影のぼかしは変えることなく範囲が広がる。
メニューバー(class
属性"menu")に、つぎのようにわかりやすくシアンの影を多めに拡張してみた。ぼけ幅は0なので、くっきりとした外枠が加わる(図5)
改めて、白い細線でつぎのようにbox-shadow
プロパティを定め直そう。メニューバーに、項目間の区切り線となじんだ細い外枠がついた(図6)。
メニュー項目にポインタが重なったとき他の項目のテキストをぼかす
いよいよ、メニューのアニメーションを加える。まず、メニューバーにマウスポインタが重なったとき、メニュー項目のテキストをぼかそう。文字をぼかすにも影を活用する。text-shadow
プロパティで影をつくったうえで、文字の色はtransparent
キーワードで透明にするのだ。メニューバー(class
属性"menu")の:hover
擬似クラスで、<a>
要素につぎのような定めを加えた。これで、マウスポインタをメニューバーに重ねると項目のテキストがぼける(図7)。
ポインタが重なったメニュー項目を浮き上がらせるアニメーション
つぎに、マウスポインタの重なったメニュー項目は、逆にくっきりと示したい。つぎのように、メニュー項目(class
属性"item")の:hover
擬似クラスで、背景は明るくし、<a>
要素のテキストは暗くして際立たせる。また、テキストには白い影を光彩のように加えた(ほとんどわからないくらいに)。これで、メニュー項目にマウスポインタを重ねたとき、他の項目の文字はぼけて、選んだ項目だけがハイライトする(図8)。
さらに、マウスポインタを重ねたメニュー項目のテキストは、少し上にずらして拡大しよう。transform
プロパティにtranslateY()
関数で垂直移動し、拡大はscale()
関数の引数に比率を渡す。引数は2つだとそれぞれ水平と垂直、ひとつなら縦横同じ比率で伸縮する。つぎのように変化は控えめにしたので、静止画(図9)でわかりづらかったら、冒頭のサンプル1でアニメーションを確かめてほしい。
滑らかなアニメーションにするため、メニュー項目(class
属性"item")にはつぎのようにtransition
プロパティを定める。タイミング関数は、立ち上がりに加速するease-in
を選んだ(図10)。transition
プロパティは継承しないので、メニュー項目の<a>
要素にも同じ定めを加えた。
マウスボタンを押したメニュー項目を凹ませる
仕上げは、マウスボタンを押したメニュー項目の表現だ。メニュー項目(class
属性"item")の:active
擬似クラスに、つぎのようなコードを定める。背景は内側(inset
)に影を加えた。例によって細かい設定として、左側の区切り線は少し暗くして、テキストの色をグレーに落とし、垂直位置は少し戻している(図11)。そして、transition
プロパティの定めを取り消すこと(none
)で瞬時に切り替わるようにした。
これで選択項目以外がぼけるメニューのでき上がりだ。書き上げたCSSの定めは、つぎのコード1にすべてまとめた。説明されて初めて気づいた細かな設定も多かったろう。冒頭のサンプル1で改めて確かめてもらいたい。また、jsdo.itのサイトで開いて[FORK]ボタンを押せば、サンプルのコピーがつくられて、自由に書き替えできる。設定をもっとはっきりした値にしてみるなど、いろいろ試されるとよいだろう。