どこでもカラーアルファ

以前の記事「さまざまな程度のカスタムプロパティ使用量」で、HSLカラー値の分離を過剰にした色とCSSカスタムプロパティを含むシナリオについて説明しました。各色をH、S、およびLコンポーネントに完全に分割するのは過剰かもしれません。

ただし、より実用的なアプローチには、この分離が含まれます。

 <code>html { --color-1-hsl: 200deg 15% 73%; --color-1: hsl(var(--color-1-hsl)); }</code>

これは、色ごとに2つのカスタムプロパティを使用します。なぜ？これにより、カラーアプリケーションの簡単な方法が提供され、アルファ透明度を簡単に調整できるためです。

 <code>.card { background: var(--color-1); } .card-with-alpha { background: hsl(var(--color-1-hsl) / 0.5); }</code>

標準のCSSには、既存の色にアルファを追加する簡単な方法はありません。ただし、将来のCSS機能は潜在的なソリューションを提供します。

 <code>/* Future CSS! (currently works in Safari Technology Preview) */ .card-with-alpha { background: hsl(from var(--color-1) hsl / 0.5); }</code>

これはエレガントですが、その生産準備は不確実なままです。

同様に、Houdini Paintのワークレットは、有望である一方で（Dave Rupertの仕事は特に注目に値します！）、幅広いブラウザのサポートがありません（FirefoxやSafariサポートはまだありません）。 Canvas APIを使用してAlphaを使用して画像を生成し、あらゆるカラー形式のアルファ透明度を効果的に可能にすることにより、説得力のあるソリューションを提供します。これはChromeで機能します。コードとビデオのデモンストレーションは、Dave's Github and Blogで入手できます。

この機能を必要とする生産対応のソリューションの場合、初期カスタムプロパティ方法が最も信頼できるアプローチです。

以上がどこでもカラーアルファの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。