フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。

https://coliss.com/articles/build-websites/operation/work/your-brain-on-front-end-development.html

CSSの便利なセレクタ「:placeholder-shown疑似クラス」を使うと、フローティングラベルも簡単に実装できる

フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。

https://coliss.com/articles/build-websites/operation/css/css-only-floating-label.html

配色のセンスがなくても、ベースカラーにぴったりなカラーパレットを1クリックで自動生成する無料ツール -Plax

UIのデザインやデータのビジュアライズに使用するカラーを決めるのに適したオンラインツールを紹介します。ベースカラーを決めるだけで、そのカラーに調和したフルスペクトルのカラーパレットが簡単に作成できます。

https://coliss.com/articles/build-websites/operation/design/ui-color-palette-generator-plax.html