BLOG 2018.08.24
CSSでホバーエフェクト-参考になる解説サイト-

AICスタッフ

# クリエイティブ

皆さんこんにちは、おかざきです。
8月もあっという間に残り1週間となりました。
最近テレビでも「ハロウィーン！！」のCMが流れ始めましたね。
もうそんな季節…時間が経つのは本当に早いものです。

そこで本日は、「コピペでできる！」CSSホバーエフェクト実装の参考サイトをご紹介します。
1分1秒も無駄にしたくない、そんな時。
コピペでできる！解説サイトを活用して作業の効率化を図りましょう！

NxWorld

https://www.nxworld.net/

こちらのブログサイトでは、制作に役立つテクニックや情報がたくさん掲載されています。

中でも私がよく参考にする記事を2つご紹介したいと思います。
まず1つ目がこちら。

「CSSのみで実装するボタンデザインやホバーエフェクト 20＋α」
https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

WEB制作の中で、ボタンのデザインやホバーエフェクトは大切だと思います。
計20種類のボタンデザイン・ホバーエフェクトのCSSをコピペで使える他、
参考サイトやボタン作成のジェネレータサイトも紹介されているので、
ボタン作成にはとても重宝する記事だと思います。

そして2つ目の記事はこちら。

「シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ」
https://www.nxworld.net/tips/css-horizontal-menu-hover-effect-example.html

よく悩みがちなグローバルメニューのデザインやアニメーション…。
困ったときはいつもこちらの記事を参考にさせて頂いてます。
この記事ではいくつかのサイトをまとめて掲載しており、実装はすべてCSSで可能なものになっています。
シンプルなボーダーを表示するものから、何度でもホバーしたくなるようなかっこいいエフェクトも、とにかく参考になります。
クールなイメージのWEBサイト制作にとても活用できそうなデザインなのではないかと思います。

ちなみに、こちらのブログサイトは、
トップページの記事一覧のホバーアニメーションもとてもオシャレです。
他の記事もどんどん読んでみたくなる、そんなブログサイトです！

Lopan.jp

https://lopan.jp/

こちらのブログサイトは、とにかく解説がわかりやすい！！
コピペで使えるだけでなく、とても勉強になります。

ホバーエフェクトの動作について解説されている記事がこちら。

「動くCSSのためのメモ。」
https://lopan.jp/css-animation/

メモ…？教科書の間違いでは…？と思ってしまうほど、
とても分かりやすく、丁寧に解説されています。
ホバー時に、どれくらいの速度でアニメーションされるかや、
CSSで実装できるスライドの作り方など…
CSSだけでこんなことまでできるんだ…！と驚いてしまいました。
解説の間にデモがあるので、なるほど…！と理解度もUPです。

他の記事も是非読んでみたいと思います。