キーカラーKey Color 配色の基準となる色 ■#eedcb3 同一色相、同一彩度の配色 明度に変化を持たせた配色 ■#eedcb3 ■#332f26 ■#665e4d ■#998e73 ■#ccbd99 ■#ffecbf 同一色相、同一明度の配色 彩度に変化を持たせた配色 ■#eedcb3 ■#eddfbe ■#edd18e ■#edc25f ■#edb42f ■#eda600 コンプリメンタリー配色Complementary 色相環の正反対にある色同士の配色 ■#eedcb3 ■#b2c4ed トライアド配色Triads 色相環を正三角形で3等分した位置にある3色の配色 ■#eedcb3 ■#b2eddb ■#dbb2ed アナロガス配色Analogous 色相環で隣り合う色を組み合わせた配色 ■#edb2c4 ■#eedcb3 ■#c4edb2 スプリット・コンプリメンタリー配色

SVGのマスクテクニックを使えばなかなかたいしたことができることをご存じでしょうか。このやり方はここ数年に広まったものですが、最近になるまでWeb開発のメインストリームに入ってきませんでした。 本記事では、Webを捜して集めたクリッピングマスク・SVG/canvasを使ったマスクのデモを紹介しています。これらの例を見れば、Webにおいてマスクがどれほど活用できるものか、それらが開発者に何を与えてくれるかを実感してもらえると思います。 （画像をクリックするとCodepenに飛びます。） １．テキスト・マスキング 動くテキスト・マスキングの見事な例です。HTMLのページ・テキストを使用しており、テキスト部分を所望のものに変えるだけでどんなものにも応用できます。 この仕掛けの種は、CSSのバックグラウンド・クリップ（background-clip）のようなプロパティにあります。クリアーな背景の使