【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 マ... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

[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/06/04 165 users コリス チュートリアル CSS stack div

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

[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス

2012/01/24 547 users コリス Opera class ul要素 Safari

デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む

[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル | コリス

2011/12/15 161 users コリス チュートリアル CSS アニメーション ボタン

CSS3の角丸・グラデーションを使って、美しくスタイルします。 このスタイルはCSS3アニメーションには関係がないため、あえて切り離しています。 /*Rounded Corners*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ background-image: ... 続きを読む

[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard | コリス

2011/12/01 148 users Twitter Facebook jQuery コリス カード

[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard さまざまなHTMLのエレメントのホバー時にカード状のインフォメーションをアニメーションで表示するjQueryのプラグインを紹介します。 ただのツールチップとは違い、カードのインフォメーションに更にカードを表示したり、Facebook, Twitterと連携したり、コールバック関数... 続きを読む

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル | コリス

2011/11/13 141 users hover focus コリス checked active

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってC... 続きを読む

ホバー時に素敵なエフェクトでパネルを変更するスタイルシート

2011/06/19 146 users エフェクト パネル アニメーション スタイルシート マウス

デモではパネルにマウスホバーすると、背景を変更しアニメーションのエフェクトを適用します。 実装方法 HTML HTMLはシンプルです。 ポイントとなるのは、h3やpなどのブロック要素をa要素で内包している点です。これはHTML5を使用する限りvalidです。 続きを読む

[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル | コリス

2011/03/29 162 users コリス チュートリアル opacity エフェクト CSS

下記は各ポイントを意訳したものです。エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。div {opacity: 1.0;}div:hover {opacity: 0.5;}これで、ホバー時に不透明度が0.5になるようになりました。ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、ど... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト | コリス

2009/09/24 313 users カーソル コリス マウス 光源 エフェクト

マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。 Buttons like Windows 7 demo ホバー時に表示している画像は下記の画像で、カー [...] 続きを読む

[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト | コリス

2009/07/10 192 users コリス jQuery Shadow Reflection デモ

ホバー時に浮かぶエフェクトがとってもリアルなスクリプトをAdrian Pelletierから紹介します。 Create a Realistic Hover Effect With jQuery demo デモはReflection（鏡面反射）とShadow（影）の二種類があり、それぞれホバーして浮かんだ際、鏡面反射と影が距離に合わせてサイズが変わります。 スクリプトのベースにはjQueryが使用さ... 続きを読む