同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ(@Panda_Program)です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF(Component Story Form
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー(支援技術)に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
こんにちは、デザイナーの本田です。こちらは Enigmo Advent Calendar 2020 の2日目の記事です。 今年でエニグモへ入社して3年目。昨年末からUXデザイングループへ異動し、BUYMAのアプリケーション UIデザインがメインになったので、考えることややることが大きく変わった1年だったと感じています。 業務の幅も広がって何を書こうか迷うのですが、今年を振り返ると今までで1番デザインツールと向き合っていたし、学んだことも多かったので デザインツールをXd→Figmaへした話 プロトタイプ作るようになった話 の2つについて書こうと思います。 1. デザインツールをXd→Figmaへした話 デザインデータ引き継ぎの関係上、Adobe Xdをメインで使っていたのですが、今年の7月頃からFigmaへ移行しました。 Xdも使いやすいですし、何よりAdobe Creative Clou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く