本日の GUI チャレンジでは、@AdamArgyleInk が、カスタム プロパティと :where() を使用して、ウェブのさまざまなボタンタイプをスタイル設定しました。新しいバリエーションを簡単に作成できるライト/ダークのアダプティブ ボタンです。
章:
- 0:00 - はじめに
- 0:19 - 概要
- 2:08 - キーボードの UX
- 2:46 - 新しいテーマの切り替え
- 3:09 - マウスの UX
- 3:34 - フォームのボタン
- 4:30 - 無効化ボタン
- 5:22 - HTML
- 5:43 - CSS ベースセレクタ
- 6:24 - アダプティブ カスタム プロパティ
- 7:20 - ボタンのバリエーション
- 10:10 - ライブボタンのバリエーションの作成
- 11:18 - まとめ
- 11:50 - モーションの軽減
- 12:57 - 結び
リソース:
- 関連情報 → https://goo.gle/3wEsaWR
- デモを試す → https://goo.gle/3a2guoV
- 出典はこちら → https://goo.gle/39uY8Na
その他の GUI チャレンジはこちら → https://goo.gle/GUIchallenges
Google Chrome Developers に登録 → https://goo.gle/ChromeDevs