Webデザイン業界は、流行語を作るのに優れています。最近の例では、Neumorphism(ニューモルフィズム)です。これは、設計要素の「new skeuomorphic」で、要素が背景から押し出されたように見えるUIトレンドです。具体的に言うとスターウォーズでハン・ソロがカーボン凍結された姿のようです。
新しいアイデアと同様にウェブには、この手法をどのように使用できるかの例がたくさんあります。ここでは、Neumorphismを実現するコードスニペットをご紹介します。
Push to Check
興味深い概念ですね。ここでは各オプションは丸みのあるボタンのようで、クリックするとボタンが押されたように見えます。これはクールなだけではなく、フォームにユニークで魅力的な印象を与えています。
The Whole Form
さらに一歩進んだこのスニペットは、フォーム全体をイメージしています。テキスト入力フォームは、ボタンが押されている間、背景から切り取られたように見えます。
See the Pen
Neomorphic Form by Swapnil (@swapnet)
on CodePen.
https://static.codepen.io/assets/embed/ei.js
Colorful Car
スポンサーリンク
UIデザイントレンドであるNeumorphismのコードスニペットコレクション
最近の投稿
- OpenAI loses another lead safety researcher, Lilian Weng
- ユアユニの実際の生徒の声を調査してみた
- [ANET] アリスタネットワークス、AI需要牽引で大幅増収!第3四半期決算は収益20%増、利益31%増と好調!
- 起業の第一歩: 夢を現実に変えるためのガイド〜7つのポイント
- 人類は宇宙をなぜ目指す?「お金以外」の本質理由 政治、科学、ロマン…実は深い「7つのワケ」は? | 読書 | 東洋経済オンライン
- フィールドエンジニアが明確にするべきこと
- 資金繰りに窮している経営者の方へ:今すぐできる資金調達方法を徹底解説!
- Upwind, an Israeli cloud cybersecurity startup, is raising $100M at a $850-900M valuation, say sources
- 「日本で魚が獲れない理由」を知った小学生の驚愕 よくある大人の反論「外国船・海水温上昇・クジラ」 | 食品 | 東洋経済オンライン
- ChatGPT told 2M people to get their election news elsewhere — and rejected 250K deepfakes
コメント