タグ ホバー時
人気順 5 users 10 users 100 users 500 users 1000 users【CSS】まだホバー時のスタイルを :hover だけで指定してるの?
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう! @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マ... 続きを読む
HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス
シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方... 続きを読む
CSS:ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 | NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 ボタンのホバーエフェクトとして見かける機会も多くなった、ホバーしたら背景がスライドしたり領域を覆うアニメーションのサンプルです。 アニメーションによってはホバー時の見栄えを維持するのではなく、ホバー時に一時的に見えるようなタイプもあります。 共通のHTML・CSS ここで紹介しているサンプルはいずれも下記のようなシンプルなHTMLをベースに... 続きを読む
data属性を利用したナビゲーションの実装サンプル | NxWorld
タイトル通り、テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまりdata属性を使ったことがないとい... 続きを読む
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト | NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しづらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルと記述内容について CSSで記述している内容はこのサ... 続きを読む
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld
見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 先述したように... 続きを読む
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 | NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 ... 続きを読む
CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集:phpspot開発日誌
CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集 2015年03月09日- Inspiration for Button Styles and Effects | Codrops CSS3等をフルに活用してボタンのホバー時のエフェクトをこれでもかという位あつめたサンプル集。 単に数を集めただけではなく、それぞれの質も高く、流行りのデザインの物がまとまって... 続きを読む
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも利用簡単。 2015/1/11 Wordpressカスタマイズ 先日、「Hover.css」というボタンをホバー時のCSSエフェクト集があるのを知りました。 このHover.cssを、ちょっと使ってみたところ、WEBで利用するボタンなどの上にカーソルが来たときに、手軽にエフェクト... 続きを読む
[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック | コリス
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">S... 続きを読む
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック | コリス
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a h... 続きを読む
[CSS]サークル状のエレメントにかわいいアニメーションを与えるスタイルシート -CSS3 Circle Animation | コリス
シンプルなHTMLでサークル状に実装したエレメントのホバー時に、かわいいアニメーションを与えるスタイルシートを紹介します。 実際の動作は、下記ページで確認できます。 Chrome, Firefoxなどのブラウザでご覧ください。 CSS3 Circle Animation アイデアの元となったのは、こちらのサイトの中央のサークル。 Vibrant Villages サークルのアニメーションは、ここで... 続きを読む
[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート(フェードも可) -Label.css | コリス
画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。 Label.css Label.css- GitHub Label.cssのデモ Label.cssの使い方 Label.cssのデモ デモでは、画像のラベルを動的に試すことができます。 通常利用する時は、静的に。 デモ 左のパネルでラベルを表示... 続きを読む
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ | コリス
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています... 続きを読む
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu | コリス
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 [html] item... 続きを読む
[CSS]コピペでOK!画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス
シンプルなHTMLで画像を配置し、ホバー時にかっこいい新しいエフェクトを与える10個のスタイルシートを紹介します。 どのコードもコピペですぐに使えますよ。 10 Easy Image Hover Effects You Can Copy and Paste ホバーしたらズームで拡大 ホバーしたらズームで縮小 ホバーしたら水平にパン ホバーしたら垂直にパン ホバーしたら少し傾ける ホバーしたら回転し... 続きを読む
TEST CORDING » Sass:CSSで描く図形36種をたった一行で書けるようにしてみた
Sass を使って一行で図形を書いてしまうというエントリーです。前回のエントリーである「Sass:CSSで描く図形13種をたった一行で書けるようにしてみた」に引き続き、少し複雑な図形21種類を追加しました。 どんな感じで実装しているのか、というのは前回のエントリーに任せて、今回は書けるようになった図形の一覧を見ていただこうと思います。また、基本図形とは違ってホバー時のアニメーションには対応していま... 続きを読む
CSS3を使った実用的なスタイルシートのテクニックのまとめ | コリス
パネルやボタン、タブ、メニューなどのUIエレメントの美しいスタイルをはじめ、ホバー時のエフェクト、レイアウトなど、CSS3を使ったスタイルシートのテクニックを紹介します。 ※CSS3を使っているため、対応ブラウザはIEでは9くらいのものが多いです。7対応もあります。 続きを読む
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート | コリス
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右:ホバー時のアイテム、左:通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装で... 続きを読む
[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス
CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む
[CSS]画像一枚だけで写真を重ねたようにするチュートリアル | コリス
デモページ ※ホバー時のアニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルです。 ラッパーのdiv要素はWebkit系ブラウザ用で、将来無しでも機能するようになるかもしれません。 <div class="stack"> <img src="image1.jpg" /> </div> まずは、右端の写真が垂直方向に重なっただけのスタイルシートです。重なりは:befor... 続きを読む
[CSS]パラパラ漫画のように画像を次々に表示させるCSS3アニメーションを使ったスライドショー | コリス
マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ!と思いましたw デモ:With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt... 続きを読む
[CSS]ホバー時のエフェクトに一工夫、リボン風デザインのナビゲーション | コリス
デモ 実装 デモ デモはCSS3アニメーションに対応したブラウザ、Chrome, Safari, Firefoxでご覧ください。 CSS3アニメーション非対応のIE8/9ではアニメーション無し、擬似要素非対応のIE7ではリボン無しになります。 実装 HTML HTMLはシンプルで、各アイテムをspan要素で実装し、全体をdiv要素で内包します。 <div class='ribbon'> <a hr... 続きを読む
[JS]画像をホバー時にさまざまなアニメーションで目立たせるスクリプト -Adipoli | コリス
デフォルト:transparent、ホバー:boxRainGrowReverse Adipoliの使い方 外部ファイル 当スタイルシートと「jquery.js」と当スクリプトを外部ファイルとして記述します。 <link href="css/adipoli.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.7.1.js"... 続きを読む
[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス
デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ:ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む