2018年9月14日のブックマーク (2件)

  • CSSでスクロールのスナップが可能に!scroll-snapプロパティの基礎知識と便利な使い方

    CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。 scroll-snapプロパティの基礎知識と便利な使い方を紹介します。 Practical CSS Scroll Snapping 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクロールにスナップさせる「scroll-snapプロパティ」 「scroll-snapプロパティ」のサポートブラウザ 「scroll-snapプロパティ」の基礎知識 親要素の「scroll-snapプロパティ」 子要素の「scroll-snapプロパティ」 「scroll-snapプロパティ」の便利な使い方 スクロールスナ

    CSSでスクロールのスナップが可能に!scroll-snapプロパティの基礎知識と便利な使い方
    z1a2nh
    z1a2nh 2018/09/14
  • コピペで実現!思わず押したくなるCSSボタンエフェクト42個まとめ

    CSSで表現できる、ユニークなボタンデザインをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 コードを見ながらサンプルを確認することができるので、アニメーションを得意とした最先端のデザインテクニックを、今後のウェブデザイン制作に活かしてみてはいかがでしょう。 コピペで実現!思わず押したくなるCSSボタンエフェクトまとめ Button Hover Effect マウスをホバーすると、重なるようなぬるりとした動きを楽しむことができるナビゲーションメニュー。 See the Pen Button hover effect by Comehope (@comehope) on CodePen. rémi’s pop-up 立体

    コピペで実現!思わず押したくなるCSSボタンエフェクト42個まとめ
    z1a2nh
    z1a2nh 2018/09/14