CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック

2023/11/07 5 users マグネット CSS hover テクニック 一昔前

CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む 続きを読む

アニメーションで魅せる！CSSボタンデザインのサンプルコードまとめ | Web Design Trends

2021/08/18 14 users アニメーション Web Design Trends 向上

ボタンはユーザーがクリックしたりタップしたり、直接アクションを起こすためのWebサイトには欠かせない要素です。 ボタンにはホバーエフェクトとクリックアクションの2つの重要なアニメーションのタイミングがあり、それぞれ適切にデザインすることによって使いやすさの向上にも繋がります。 今回は、アニメーションが... 続きを読む

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス

2020/12/14 119 users コリス ポパー アニメーション エフェクト CSS

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む

コピペで簡単に利用できる、CSSアニメーションを使ったボタン・スピナーのコレクション -CSS Wand | コリス

2019/06/17 42 users コリス アニメーション 商用 ローディング用 コピペ

コピペで簡単に利用できる、CSSアニメーションを使ったボタン・スピナーのコレクションを紹介します。ボタンのホバーエフェクトやローディング用のアニメーションが用意されており、商用でも無料で利用できます。 CSS Wand ...記事の続きを読む 続きを読む

【総まとめ】2018年特に印象的だった世界のベストWebデザイン厳選51個 - PhotoshopVIP

2018/12/26 85 users PhotoshopVIP グリッドレイアウト エフェクト

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たくさん登場しました。 サイトに動きを加えるマイクロインタラクションやホバーエフェクト、一般的なグリッドレイアウトを無視したり、マウスカーソル... 続きを読む

CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 | NxWorld

2018/03/26 52 users 見栄え NxWorld 共通 アニメーション ホバー時

自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに... 続きを読む

【コピペで簡単】画像のホバーエフェクトに使える！CSSスニペットリスト８選｜SeleQt【セレキュト】

2017/02/24 16 users SeleQt セレキュト コピペ 画像

ウェブのトレンドは変わりやすく、サイトを最新に保つ作業はどれだけやっても終わりがありません。CSSを使えばウェブサイトのカスタマイズがあっという間にでき、新たな機能を追加することも簡単になります。時間が節約できるだけでなく、サイトのパフォーマンスも向上するでしょう。 ただし、CSSは慣れてしまえば快適ではあるのですが、その基本を学習し使い始めるのは大変です。美しいサイトを作るにはどうしても高いコー... 続きを読む

クラス付与でボタンデザインやホバーエフェクトを実装できるスタイルシート「bttn.css」 | NxWorld

2017/01/05 27 users bttn NxWorld CSS 実装 要素

「bttn.css」はその名の通りボタンに関するスタイルを適用させるスタイルシートです。要素に用意された各クラスを付与することで、簡単にデザイン・サイズ・ホバーエフェクトなどを適用することができます。 使い方 使い方は簡単で、サイトからダウンロードするなどしたCSSをひとつ読み込み、あとは以下のサンプルコードのように適用したい要素に「bttn」から始まる各クラス名を記述するだけとなっています。 サ... 続きを読む

ウェブ制作で差がつく！コピペ可能なHTML/CSSスニペット50個まとめ 2016年10月度 - PhotoshopVIP

2016/10/21 129 users Ｒｕｎ PhotoshopVIP スライダー 一味 スニペット

ウェブ制作で差がつくテクニックを コピー&ペーストで利用できる HTML/CSS スニペット をまとめてご紹介します。最新のデザインテクニックを駆使したレイアウトやスライダー、ボタンエフェクト、ホバーエフェクトなど ユーザーがたのしむことができる 工夫のつまった作品が数多く公開されています。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみてみましょう。 「Run... 続きを読む

HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ - PhotoshopVIP

2016/03/15 541 users PhotoshopVIP コピペ スタイリング CSS 動作

ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、 HTML/CSSのみで実装できるホバーエフェクト をまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるの... 続きを読む

CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ - PhotoshopVIP

2015/11/26 113 users PhotoshopVIP ナビゲーションメニュー CSS

ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。 どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。 詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーション... 続きを読む

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld

2015/09/17 190 users NxWorld ナビゲーションリンク ホバー時 改行 CSS

見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 先述したように... 続きを読む

[CSS]画像のキャプションをいい感じのアニメーションで表示するシンプルなホバーエフェクト | コリス

2015/06/10 69 users コリス しぐさ div要素 キャプション 見出し

シンプルな実装で、画像のキャプションを美しいグラデーションのパネルにアニメーションで表示するシンプルなホバーエフェクトを紹介します。 イラストは、以前紹介した「Girls Design Materials」です。 生き生きとした表情やしぐさが魅力たっぷりなガーリー素材 実装 Step 1: HTML 画像とキャプション（見出しとテキスト）をセットに、a要素で括り、全体をdiv要素で内包します。 <... 続きを読む

ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ | NxWorld

2015/05/20 153 users エフェクト CSS NxWorld コピペ エントリー

メモしていたものが溜まってきて一覧化したのでシェアします。以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使って... 続きを読む

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld

2015/04/05 443 users エフェクト フラッシュ スライド ホバー時 拡大縮小

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 ... 続きを読む

[CSS]レスポンシブ対応、スクリプト無し、完成度も非常に高いタブコンテンツを実装するテクニック | コリス

2014/06/30 150 users TAB コリス 切替 タブ CSS

スクリプトは一切使用せず、デスクトップ時はタブコンテンツ、スマフォ・タブレット時はタブをスケールダウンに変更してコンテンツを表示するスタイルシートのテクニックを紹介します。 単にレスポンシブ対応のタブというだけでなく、コンテンツの切替やタブのホバーエフェクトなど、非常に完成度の高いタブコンテンツに仕上がっています。 デモのアニメーション 実際の動作は下記ページで確認できます。 No JS: Tab... 続きを読む

[CSS]このホバーエフェクトかわいい！蝶番を軸にぷら〜んと開くCSS3アニメーション | コリス

2014/02/26 64 users コリス Twitter 蝶番 Webkit系 CSS

Twitterのボタンをホバーすると、蝶番を軸に開くかわいいアニメーションを実装したスタイルシートのデモを紹介します。 パタリと開いた後、ぷら〜んとするのいいですね。 実際の動作は、下記デモページでお楽しみください。 Chrome, SafariのWebkit系がよいです。 Hinged Twitter Button 実装は、こんな感じです。 HTML TwitterのアイコンにはFont Awe... 続きを読む

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js | コリス

2014/02/17 125 users コリス jQuery スクリプト Safari ぺら

写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。 Sticker.js Sticker.js -GitHub Sticker.jsのデモ Sticker.jsの使い方 Sticker.jsのデモ デモはChrome, Safari... 続きを読む

[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css | コリス

2014/01/06 318 users コリス Sass Step class CSS

ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル ... 続きを読む

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld

2013/12/12 1234 users NxWorld CSS ボタンデザイン

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場... 続きを読む

『jQuery 最高の教科書』サンプルサイト

2013/12/04 919 users jQuery キャプション かんたん 入門 丸いボタン

Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 ... 続きを読む

秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ | コリス

2012/09/10 538 users コリス アイデア CSS3 まとめ

画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。 続きを読む

[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート | コリス

2012/08/09 87 users エレメント チュートリアル 円形 コリス サムネイル

最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装で... 続きを読む

画像やボックス要素にhoverするとエフェクト付きで別のボックス要素を表示するjQueryプラグイン・ContentHover - かちびと. net

2012/01/14 109 users net ボックス要素 フェードエフェクト 画像 マウス

画像やボックス要素にマウスホバーすると 別のボックス要素をフェードエフェクトや スライドアニメーションで表示させる事が 出来るjQueryプラグインです。昔は色々と これ系を見かけましたけど最近は全然無い ですね。 これくらいなら自作する、という方も多いのか、以前はかなり見かけたホバーエフェクトのjQueryプラグインは全然見かけなくなりましたが、プラグインの方が楽な場合も多々あると思いますのでこ... 続きを読む

CSS3のTIPSなどのまとめ (2012/1/12) :: dotHTML5

2012/01/12 11 users Tips Tutorial dotHTML5 JSなし Mac

JSナシのCSS3だけで作るMacのカバーフローのようなUI → Tutorial: 3D Accordion with CSS3 (英語) (Admix Web) 画像にクールなアニメーションするホバーエフェクトを作るCSS3チュートリアル (phpspot開発日誌) JSナシのCSS3だけで作る画像スライドショー → How to Create a Pure CSS3 Slideshow (英... 続きを読む