【CSS】まだホバー時のスタイルを :hover だけで指定してるの？

2023/08/07 267 users hover enabled Summary Button 結論

はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マ... 続きを読む

CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ | コリス

2020/03/26 22 users ピュアCSS 要件 スライド 実装 コリス

テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a... 続きを読む

HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス

2019/11/11 447 users コリス class フォーカス時 エフェクト デスクトップ

シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方... 続きを読む

JSで楽譜を描画して再生までできる「abcjs」:phpspot開発日誌

2019/10/22 34 users カラーピッカー 楽譜 phpspot開発日誌 ボーダー 再生

abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」 続きを読む

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

2018/03/26 52 users ホバーエフェクト 見栄え NxWorld 共通 アニメーション

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

data属性を利用したナビゲーションの実装サンプル | NxWorld

2016/01/23 76 users アニメーション HTML カスタマイズ NxWorld 要素

タイトル通り、テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまりdata属性を使ったことがないとい... 続きを読む

シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ | NxWorld

2015/12/21 34 users NxWorld ミニマルデザイン グローバルナビゲーション

グローバルナビゲーションといえば作り込んだ感じのデザインや移動先のページの内容が把握しやすいようなアイコンなどを一緒に配置しているものをやはり多く見かけますが、中には特にミニマルデザインなサイトなどでテキストだけを並べたシンプルな水平メニューを取り入れているサイトもあります。ただパッと見はたしかにシンプルなデザインでもホバー時にアニメーションを加えたりしているサイトも多く、自分も普段からそのような... 続きを読む

CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト | NxWorld

2015/12/06 82 users アニメーションエフェクト NxWorld 矢印 ゴースト 実装

フラットやゴーストといったようにシンプルで一見ボタンと認識しづらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルと記述内容について CSSで記述している内容はこのサ... 続きを読む

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

2015/09/17 190 users NxWorld ナビゲーションリンク テキストリンク 改行

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

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

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

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

CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集:phpspot開発日誌

2015/03/09 69 users エフェクト phpspot開発日誌 サンプル集 ボタン

CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集 2015年03月09日- Inspiration for Button Styles and Effects | Codrops CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集。 単に数を集めただけではなく、それぞれの質も高く、流行りのデザインの物がまとまって... 続きを読む

100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。

2015/01/11 517 users WordPressカスタマイズ カーソル CSSライブラリ

100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。 2015/1/11 Wordpressカスタマイズ 先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。 このHover.cssを、ちょっと使ってみたところ、WEBで利用するボタンなどの上にカーソルが来たときに、手軽にエフェクト... 続きを読む

[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック | コリス

2015/01/08 52 users コリス NAV CSS テクニック ナビゲーション

ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">S... 続きを読む

[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック | コリス

2014/11/21 65 users コリス CSS テクニック スクリプト テキスト

ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a h... 続きを読む

[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス

2013/11/20 63 users コリス Firefox Chrome アニメーション HTML

シンプルなHTMLでサークル状に実装したエレメントのホバー時に、かわいいアニメーションを与えるスタイルシートを紹介します。 実際の動作は、下記ページで確認できます。 Chrome, Firefoxなどのブラウザでご覧ください。 CSS3 Circle Animation アイデアの元となったのは、こちらのサイトの中央のサークル。 Vibrant Villages サークルのアニメーションは、ここで... 続きを読む

[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css | コリス

2013/05/21 109 users コリス フェード 半透明 エフェクト CSS

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。 Label.css Label.css- GitHub Label.cssのデモ Label.cssの使い方 Label.cssのデモ デモでは、画像のラベルを動的に試すことができます。 通常利用する時は、静的に。 デモ 左のパネルでラベルを表示... 続きを読む

エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」:phpspot開発日誌

2013/05/17 26 users エレメント エブ jQueryプラグイン オーバー 画像

エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」 2013年05月17日- Slickhover.js エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」。 画像等のエレメントにオーバーレイすると、アニメーションしつつフェードアウトし、上に画像をかぶせる的なエフ... 続きを読む

[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ | コリス

2013/04/22 211 users MENU 半透明 コリス グラデーション アニメーション

シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています... 続きを読む

[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu | コリス

2012/11/19 133 users item コリス スクリプト HTML アニメーション

ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 [html] item... 続きを読む

[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス

2012/11/08 549 users ズーム 縮小 HTML コリス 新しいエフェクト

シンプルなHTMLで画像を配置し、ホバー時にかっこいい新しいエフェクトを与える10個のスタイルシートを紹介します。 どのコードもコピペですぐに使えますよ。 10 Easy Image Hover Effects You Can Copy and Paste ホバーしたらズームで拡大 ホバーしたらズームで縮小 ホバーしたら水平にパン ホバーしたら垂直にパン ホバーしたら少し傾ける ホバーしたら回転し... 続きを読む

TEST CORDING » Sass：CSSで描く図形36種をたった一行で書けるようにしてみた

2012/10/04 3087 users Sass 図形 CSS 一行 TEST CORDING

Sass を使って一行で図形を書いてしまうというエントリーです。前回のエントリーである「Sass：CSSで描く図形13種をたった一行で書けるようにしてみた」に引き続き、少し複雑な図形21種類を追加しました。 どんな感じで実装しているのか、というのは前回のエントリーに任せて、今回は書けるようになった図形の一覧を見ていただこうと思います。また、基本図形とは違ってホバー時のアニメーションには対応していま... 続きを読む

CSS3を使った実用的なスタイルシートのテクニックのまとめ | コリス

2012/08/28 516 users UIエレメント エフェクト タブ コリス レイアウト

パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。 ※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。 続きを読む

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

2012/08/09 87 users ホバーエフェクト エレメント チュートリアル 円形 コリス

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

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む

[CSS]画像一枚だけで写真を重ねたようにするチュートリアル | コリス

2012/06/04 165 users コリス チュートリアル CSS stack div

デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:befor... 続きを読む