タグ

webデザインに関するhanabi_hibanaのブックマーク (2)

  • コピペで使うマウスオーバー時のhover cssエフェクト28選 | SONICMOOV LAB

    今回はマウスオーバー時のアニメーションに関する良さげなものをまとめました。 hover cssエフェクトの中から、コピペで使えるものをピックアップしています。 これまでのCSSに関するエフェクトの記事はこちら 関連 使える!CSSアニメーション 20選 様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なhover cssエフェクトがまとめられています。 スライドするButton Hover Effects これもボタンに関する様々なhover cssエフェクトです。 グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。 様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピ

    コピペで使うマウスオーバー時のhover cssエフェクト28選 | SONICMOOV LAB
  • たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

    短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様 ブラウザ・サポート状況(Can I use…) フィーチャー・クエリ(@supports) と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃい

    たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方
    hanabi_hibana
    hanabi_hibana 2021/03/25
    CSSだけでパララックス
  • 1