1. 「She」- ローディングアニメーション
See the Pen Her – OS1 Loading by Siyoung Park (@psyonline) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
2. 円形カレンダー表示 – 円形のカレンダーと時計が表示され、気象情報とカレンダーのウィジェットモックアップ
See the Pen Circular Calendar Display by Matthew Juggins (@mattjuggins) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
3. デイリーUI＃012：Eコマースショップ（シングルアイテム）
See the Pen Daily UI #012: E-Commerce Shop (Single Item) by Fabio Ottaviani (@supah) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
4. ローダーカラーストローク（svg +キャンバス）によるモーフィングシェイプ
See the Pen morphing shape with spinning color stroke (svg + canvas) by Rachel Smith (@rachsmith) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
5. ステップ
See the Pen Step by Joe Harry (@woodwork) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
6. 平等愛🌈 – アニメーションローダー
See the Pen Equal Love 🌈 by yumeeeei (@yumeeeei) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
7. CSSパースペクティブテキストホバー
See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
8. Linaによるフラットデザインの遊園地svg（CSSによるアニメーション）
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
9. 純粋なCSSの球
See the Pen Pure CSS sphere by Louis Hoebregts (@Mamboleoo) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
10. CSSラジオボタン
See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.
https://production-assets.codepen.io/assets/embed/ei.js
この中で実質、デザインとして自分で組み入れてカスタマイズしたのは10番目のCSSラジオボタンだね。
これは、ブラウザの基本機能で表示されるラジオボタンをクールにしてくれるので使える。
基本のラジオボタンだと小さすぎて押下しにくいと言う事や、選択している際のフォーカスなどがわかりにくいといった点を考慮するとこのくらいの改変がデフォルトになってくれるといいな。
ブラウザ解釈ってまだまだ、古い概念とか残ってるし。
まあ、そうしないとレガシーシステムとか補完できないからか。
銀行のシステムとか。
続きは以下から
