UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高差をつけ目立たせたり、彩度と明度の関係など、UIデザインに効果的なテクニックも詳しく解説されています。 CSSでシャドウを実装する前に、一読をお勧めします。 Designing Beautiful Shadows in CSS by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、当記事では画像にしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに シャドウをなぜ使用するのか 一貫性のある環境の構築 美しいシャドウの実装方法1: レイヤー化 美しいシャドウの実装方法2: 色
ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
