CSSフレームワークを使おう

■第11話：目を引くアニメーションを作ろう2（光と影）

（最終更新日：2023.08.02）

カッコいいサイトをつくりたい！

前回に引き続き、Web制作をする方なら、誰でも一度は思うはずである。 しかしながら、JavaScriptは難しいしjQueryも使いこなせてない。そんなお悩みも少なくない。 今回はCSSだけでカッコよく装飾できるエフェクトの第2回をお届けする。

１.光るCSS

上記の画像にマウスをのせてほしい。（スマートフォンの方は軽くタップ）画像が斜めからキラっと光る。 このような効果を１つ付けるだけで、普通のWebサイトよりも印象に残りやすくなる。 CSSだけで実装できるので、ぜひ自分のサイトでも試して他のサイトより一歩上を行くデザインにしよう。

上記のようなエフェクトはCSSだけで実装できる。下記のコードで説明する。 まずはwrapperの外枠領域を指定する。 光る効果は白色と透明度を変化させることによって、実現できる。 shining-effect発生時の背景色を白にして、それを0.6秒、定速で一回行うようにする（コード左下）。 その際の白の変化を斜め50度から起こし、白の表示の強さを0→0.6→0.4→0.2→0と指定する（コード右）。 これにより、光を一旦強めてから弱めるように指定している。キラリと光るように見せることができる。 コードや言葉だけだと分かりにくいかもしれない。数字を変化させながら、実際使って体感してほしい。

もし、スマホのタップにも対応させたい場合は、wrapperにontouchstartの空プロパティが必要になる（下記HTML部分）のと、 animation-delayでアニメーションを少し遅らせる必要がある（下記CSS部分）。

２.影をつけるCSS

影をつけるのは、非常に簡単だ。box-shadowかdrop-shadowを使えば良い。 box-shadowはボタン等の決まった形のものに対して影を付けるのに適しているが、画像に影を付けるのには向いてない。 そこで、画像の場合はdrop-shadowが有効になる。透明化した画像であれば、境界線を認識して画像に影を付けることができる。

box-shadowとdrop-shadowのCSSについてはその下に示す。影の方向（XY）と太さ、ぼかしの範囲、色を指定するだけで簡単に付けられる。 （影はマイナスを付けて逆方向にすることもできる）。

３.まとめ

今回、CSSだけで光や影を表現した。 特に光るエフェクトはアニメーションにもなっており、かなり目を惹く表現になっている。 他とは違うキラリと光るWebサイトを作ろうと思ったときは、是非今回の内容を思い出してほしい。 きっとヒントがあるはずだ。

▼参考図書、サイト

  【CSS】知っておくと便利！短いコードで実装できるCSS小技20選　　PHOTOSHOPVIP
  【CSS】animationプロパティの使い方解説！（アニメーション基礎）　　PENGIN BLOG