CSSで画像に影をつけたり動かしたりする方法

ウェブサイトに画像やボタンを設置してそこにリンクを設定したときに、少しアニメーションをつけるとおしゃれですよね。
ホバーで少し上がったり、クリックで少しさがったり。画像自体には影がなくても、cssで影をつけることも出来ます。
こちらの記事では、コピペで使えるCSSを公開します。

下のボタンにカーソルを合わせると少し上がって、クリックすると少し下がります。

button

動かしたい画像を<a>タグで括って、そこにクラス(ここではdeco_btnとクラス名をつけています。)を設定します。
HTMLのソースはこんな感じです。

そして、cssはこちら。

ここでは上下の動きなので、translateY() を使用していますが、横の動きならtranslateX()を使います。
またtransition-timing-functionプロパティーの設定によって、いろいろ動きに変化が出ます。

やりすぎはユーザビリティーを悪くしますので、さりげなく、使い心地の良さを追求しつつ楽しみたいですね。

 Google+ B はてブ  LINE  Feedly

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください