今回はposition:absoluteとfilter多用で画像に「鏡面反射エフェクト」を効かせて特殊な影を作りtransitionで滑らかなアニメーションを実装してみました。
filter: blur、saturate、brightness、grayscale、opacityをアニメーションで使用しているので「フィルターエフェクト」もしっかりと確認できます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
position:absoluteとfilterで画像に「鏡面反射エフェクト」をつける方法3選
1. 画像が反射してオシャレな影が現れるhoverエフェクト
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- filterプロパティのblurとsaturateを使い分け、ぼかしと彩度を調整
- transform: scale、skewを使い分け、影の傾きや伸縮を再現
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定
2. filter加工した画像が反射して立体的な影が現れるhoverエフェクト
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- filterプロパティのblur、saturate、brightness、grayscale、opacityを使い分け、ぼかし、彩度、明度、モノクロ度、透明度を調整して画像の存在感を強調
- transform: scale、skewを使い分け、影の傾きや伸縮を再現
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
- position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定
- 影の長さをheightで調整してよりカッコいいデザインを実現
3. 画像が反射してできた影が自然に動くhoverアニメーション
動きは下の画像のような感じになります
実際の動きはこちらです
コードはこちら
ここがポイント!
- filterプロパティのsaturate、brightness、grayscale、opacityを使い分け、彩度、明度、モノクロ度、透明度を調整して画像の存在感を強調
- transform: scale、skewを使い分け、影の傾きや伸縮を再現
- transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
- hover前後で影の位置、傾斜角度、伸縮度を変えてアニメーションらしさを強調
- position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります