タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }
iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をスマホやタブレットでは無効にさせてPCのみで実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御ができるのでメモとして紹介します。 mediaクエリーのhoverとpointer PCデバイスのみにCSSのhover動作を実行させるには、CSSメディアクエリーで判定できる以下の2つを使用します。 ・使用デバイスがhoverを使えるかどうか ・使用デバイスのポインターの種類 この2つを組み合わせることでPCのみを判定させた状態を作り、その中にhover動作の指定を記述します。 実際の記述方法については以下です。 a
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
今回はマウスオーバー時のアニメーションに関する良さげなものをまとめました。 hover cssエフェクトの中から、コピペで使えるものをピックアップしています。 これまでのCSSに関するエフェクトの記事はこちら 関連 使える！CSSアニメーション 20選 様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なhover cssエフェクトがまとめられています。 スライドするButton Hover Effects これもボタンに関する様々なhover cssエフェクトです。 グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。 様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピ
hoverメディア特性には@media (hover: hover)と@media (any-hover: hover)の2種類があります。 @media (hover: hover): 主な入力デバイスがhoverに対応している場合に適用する@media (any-hover: hover): 入力デバイスのいずれかにhoverに対応している入力デバイスが含まれる場合に適用する少し前までは@media (hover: hover) and (pointer: fine)で「主な入力デバイスがhoverに対応していて、かつマウスのような正確なポインターがあるデバイスの場合」にのみhoverを適用するやり方を行っていましたが、この方法ではiPadのMagic Keyboardのカーソル操作でhoverが適用されないようです。 そのため、Magic Keyboardが接続されている時のみhov
まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
AtroposAtropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and as WebComponent (for use with Angular, Vue, Svelte, Solid and other frameworks)
きっかけ 最近、IE/Edge確認のためSurface goを買って使ってるんですが、ナビゲーションとかでうまく動かないサイトをたまに見かけます。 ↓は、bootstrapのhoverを利用したドロップダウンメニューライブラリbootstrap-dropdown-hoverをタブレットで操作している様子です。 ちょっとわかりにくいですが、タップしてもドロップダウンメニューが表示しないことがあります。 なにが起きてるのか？ パソコンではhover時に下層メニューが表示します。 スマホでは、タブレット同様、hoverという操作は存在しませんが、タップ時に下層メニューが表示します。 これは、多くのスマホの場合、 タップしている最中 と タップ後 が :hover の擬似クラスに割り当てられているためです。 よって、CSSの :hoverクラス で実装されていればパソコン同様に操作可能です。 スマ
Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の画像アニメーションエフェクト、12のテキストアニメーションエフェクト、オーバーレイやカラーなどが全てclassで管理されており、組み合わせる事で1000以上のエフェクトのパターンを作れるよう設計されているそうです 各エフェクトは全てclassで管理されています。例えば上サンプルなら <figure class="c4-izmir c4-border c4-border-corners-2 c4-image-pan-left"> </figure> 親要素に、izmirを使うためのclass、ボーダーアニメーションを加えるclass、ボーダーエフェクトの種類を指定するclass、左にパーンするclassを付
Filed underAnimationoninFebruary 9th, 2021.Feb 2021.Last updatedoninSeptember 8th, 2024.Sep 2024. IntroductionThe world of web animations has become a sprawling jungle of tools and technologies. Libraries like GSAP and Framer Motion and React Spring have sprung up to help us add motion to the DOM. The most fundamental and critical piece, though, is the humble CSS transition. It's the first animati
マイグレーションコード自作して File-Based Routing に自動移行！！ ~250 ページの歴史的経緯を添えて~
ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。 今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。 使用時の注意事項などは各サイトをご覧ください。 Hover.css サイトへ お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。 CSS ANIMO サイトへ hoverとローディングのアニメーションがそろっています。 要素をクリックするとコードのコピーができます。hoverした時に下線を引くアニメーションなどでもいくつかパターンを用意してくれています。 Magic Animations CSS3 サイトへ hoverだけじゃなくてスクロール時などにも使えそうなアニメーションがそろっています。 ちょっと癖は強めですが、インパクトがあります。 Css Effects サイトへ hover
2020.02.24 / tips 脱クリッカブルマップ！hoverやレスポンシブにも対応できるクリッカブルなSVG 地図や店内図のようなイラスト内に複雑な形状のリンクを貼りたい時ってありますよね。 以前はそういった場合は、<map>タグと<area>タグを使って実装するクリッカブルマップという手法が主でした。 しかし、クリッカブルマップはレスポンシブへの対応が難しかったり、hoverでcssプロパティを変更したりtransitionをかけたりすることができませんでした。 そんな課題もSVGを使えば簡単に解決します。 では、早速イラストレータでの操作からコーディングまで順を追って解説します。 イラストレータのデザインを、リンクにしたい図形グループ毎にレイヤーに分けます。 今回は「素材Library.com」さんから、九州地図のベクターフリー素材をダウンロードして使ってみます。 ポイントは、
CSS Line Hover Styles for Links A collection of simple and subtle CSS-only line hover animations for links.
CSSの設定でhoverやactiveの設定をしたはずなのに、スマホだと効かない！！なんて時ありますよね。その時の ために、hoverやactiveをいじらずにたった2分で対処できる方法をお教えします！スマホの需要によりレスポンシブ デザインも主流になってきていますが、タッチデバイスでも少しでも凝ったデザインや動きが出るようにしたい！ そんな思いを実現できる方法です！ 私もそうですが、よく忘れてしまいますのでメモするかブックマークでもしてください。 結論:ontouchstart属性を使う！ もう早速結論言っちゃいます！ 『ontouchstart属性を使うだけ』！これだけです！ 深く考える必要はありません。 むしろ、これを指定しないとタッチでは:activeと:hoverは反応しないんです。 <body> <div id="wrapper"> <div class=&
更新日: 2020年9月23日公開日: 2020年9月17日【CSS】hoverで作る簡単アニメーションとおすすめプロパティ6選 この記事では、簡単なアニメーションを作れるhoverについて解説しています。 「ログインボタンが透けるのってどう書いてるの？」 「カーソルを合わせるだけで動きだすようにしたい」 「CSSでいろいろ試してみたい」 動きのあるおもしろい効果をCSSで手軽に作れたら便利ですよね。 そう思っている方のために、今回は以下の3つをご紹介します。 hoverの特徴と使い方 hoverとセットで使えるプロパティ6選 hoverを使ったCSSアニメーション2選 また、記事で紹介しているコードはコピー可能です。 難しいところはコピペして、まずは感覚的に遊んでみてください！
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let’s look at those while being mindful of important things, like accessibility, performanc
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader. Flash’s grandson, WebGL has become more and more popular over the last few years with libraries like Three.js, PIXI.js or the recent OGL.js. Those are very useful for easily creating a blank board where the only boundaries are your imagination. We see more and more, often subtle integration of WebGL
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of links where the wider/bolder text doesn’t push anything anyway. Sometime
In my last article we saw how CSS background properties allow us to create cool hover effects. This time, we will focus on the CSS text-shadow property to explore even more interesting hovers. You are probably wondering how adding shadow to text can possibly give us a cool effect, but here’s the catch: we’re not actually going to make any shadows for these text hover effects. Cool Hover Effects se
Chrome91で#tab-hover-cardsと#enable-tab-searchと#sharing-qr-code-generatorが削除されたChromeGoogleバグtab-hover-cards tab-hover-cards タブホバーカードが何かっていうとこれです。 マウスカーソルをタブ上に持っていくと、詳細がポップアップで表示されます。 このゴミを出したくない場合はchrome://flags/からtab-hover-cardsをDisabledにすることで非表示にすることが可能です。 当然100人中99人がオフにしていると思いますが、なんとChrome91で強制オンにされたうえで設定フラグが削除されました。 つまり、オフにすることができません。 当然ながら大不評で、バグチケットも乱立しています。 https://bugs.chromium.org/p/chromi
CSSでhover時に画像を切り替えて、より複雑でオシャレなWEBページを作成したいということがあります。 ここでは以下の猫と犬の2つの画像を用いて色んなパターンにおいて、CSSでhover時に画像を切り替える方法について紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="img_container"> <img src="cat-2536662_1280.jpg" width="100%" height="100%"> <img src="t-r-photography-TzjMd7i5WQI-unsplash.jpg"
See the Pen css sample item-list by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以上のサンプルはhover時の表示に擬似要素（:after）を使っています。このCSSについて分解して紹介します。 コードのサンプルというよりCSS装飾の考え方の参考になれば。 概要 CSSでやることを言葉でざっと分解すると以下になります。 a:after を半透明フィルムのように a 全体を覆うようにする a:after に Fontawesome のアイコンを出す a:after は平時は透明にする （opacity:0） a:hover で a:after を表示させる （opacity:1） ※完成像が頭の中に（or絵として）あったうえで、こんな風にすれば出来るやろ！という手順をイメージします。
イメージマップ（クリッカブルマップ）の実装案件、今から12年前に作成して以来、久しぶりにありました。地図とかイラストマップみたいなナビゲーションは今でも、ケースバイケースで必要とされますね。 でも、レスポンシブなフルードイメージだと、area で指定したリンク領域の座標が画像サイズの変化に対応しないので、ずれていってしまいます。 こんなときは javascript でどうにかするしかないよね、と思ったら、やっぱりjQuery のプラグインがありました。 今回は、面倒なイメージマップの座標指定が簡単にできるWebサービスと、hover 時の効果を簡単に加える方法を併せてご紹介します。 HTML Imagemap Generator でイメージマップを作成する イメージマップの作成は難しくありませんが、リンク領域の座標指定がとにかく面倒！ 12年前は Fireworks で作業した記憶があり
Many Tricksがポップアップ・パレットのカスタマイズやウィンドウ・レイアウトの保存機能などを実装したMac用ウィンドウマネージャアプリ「Moom v4.0」をリリースしています。詳細は以下から。 米オレゴン州のソフトウェア会社Many Tricksは現地時間2024年08月21日、2011年から開発＆販売しているMac用ウィンドウマネージャアプリ「Moom」の最新バージョンとなる「Moom v4.0」をリリースしたと発表しています。 It may have been a long time coming—over 12 years since Moom 3’s release—but we think Moom 4 was well worth the wait. During those years, we’ve been listening to all your input,
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path. Today I’d like to share a simple hover effect with you. It’s a recreation of the hover effect seen in the menu on the DDD Hotel website by Garden Eight. The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image. The shape is visi
画像にカーソルを乗せて拡大させるのは、実務でも非常に良くある実装です。 そして、画像を表示させるには『imgタグ』と『background-image』の2種類の方法があります。 今回は、両方のケースで画像を拡大する方法を解説していきますが、どちらもCSSのみで実装できます。、
A couple of simple & subtle CSS-based line hover animations for links. Those little line animations are a perfect way to enhance a design and add subtle micro-interactions to a website. Today I’d love to share some super-simple ideas that are based on CSS only, no JavaScript involved. Most effects use a pseudo-element as line and some have a little SVG line animation, like this one: <a href="#" cl
:hoverと:activeでの挙動の違い疑似クラスの:hoverを使うと、ホバー時のスタイルが適応できて、:activeを使うとクリック時のスタイルの適応ができます。 それぞれの疑似クラスの区別を整理すると、下記のようになります。 :hover = 要素にマウスカーソルが乗っているときのスタイル:active = 要素をクリックしたときのスタイルしかし、スマホの場合はマウスカーソルがないため、下記のような挙動の違いが出てきます。 :hover = タップ後、違う要素がタップされるまでのスタイル:active = タップ中のみのスタイルそのため、スマホで何かをタップするときはホバーとアクティブが順に適応され、ホバーのスタイルに関しては他の要素がタップされるまでスタイルが残り続けます。 See the Pen :hover and :active by Masakazu Saito (@31
を加えるだけ！ bodyにontouchstart=""を指定すれば、子要素がタッチ時に反応するようになる。属性のプロパティは空でOKです。 ※ ontouchstart=""である必要はない ontouchendでも可能。 <span class="nt"><div</span> <span class="na">class=</span> <span class="s">"box"</span> <span class="na">ontouchstart=</span> <span class="s">""</span> <span class="nt">>これは設定例です</div></span> ただ、iphoneでテストしてみると、PCのhoverのようには動かず、ボタンとしての認知性は向上しないように感じた。 もう少し頑張ってリサーチ。 いろいろ調べてみると、JQueryを使う
With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users. Up until fairly recently, we might have caught ourselves making assumptions based on the size of a device: that mobile devices would rely on touch input, for instance, while for larger screen sizes we might assume the
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
スマホにおける:hoverは、タップした要素に装飾があたった後、別の要素に「タップされた」と判定されるまで装飾が残ります。 :hoverで指定したものは、タップして指を離した後も設定した装飾が残り続けることになるのでデザイン的・ユーザビリティ的にもあまりよくありません。 これでいくと、タッチ端末でタップする瞬間の装飾をしたいなら、:hoverではなく:activeの方が近いということになります。 では、PCではhover、スマホ・タブレットではactiveと切り分けて、同じスタイルをそれぞれ指定すればいい、という考えもできますがなかなかスッキリしませんよね。 そもそもタッチ端末ではユーザーの動作に反応する装飾は行わない、というのも選択肢としてはありだと思いますが、今回はそこも含めてどう制御するかという観点でまとめていきます。 端末・ブラウザによる挙動の違い ios特有のものなのか、特にsa
問題 ・子要素にマウスが乗ったら、親要素の色を変えたい。 ・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。 やっぱりJavaScriptがいりますか？ 答え CSSでできます。 pointer-eventsプロパティでできます。 pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。 pointer-events: auto; /* 初期値。通常通りホバーやクリックのイベントを受け取る */ pointer-events: none; /* イベントを受け取りません */ pointer-eventsプロパティは一般的なブラウザではほぼ使用可能。IEは11以降で使用可能です。 例1）親要素:hover を特定の子要素にマウスが乗った時に適
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
