画像からのシェイプの作成

画像をもとにした単純なシェイプ

シェイプの画像を使用するには、完全に不透明ではない領域があるアルファチャンネルが必要です。 shape-image-threshold プロパティは、この透明度のしきい値を設定するために使用されます。この値よりも透明度の低いピクセルは、シェイプの範囲を計算するために使用されます。

簡単な例として、赤い塗りつぶしの星形の領域と、完全に透明な領域のある画像があるとします。 shape-outside プロパティの値として、画像ファイルへのパスを使用します。コンテンツは星形の図形で折り返されるようになりました。

シェイプからテキストを離すために shape-margin を使用することができ、作成されたシェイプの周囲と、テキストとの間のマージンを指定します。

CORS 互換

画像からシェイプを作成する際には、使用する画像が CORS 互換である必要があります。サイトと同じドメインにホスティングされている画像は動作しますが、画像が CDN などの別のドメインでホスティングされている場合は、正しいヘッダーを送信してシェイプで利用できるようにする必要があります。この CORS 互換画像の要件のため、ローカルのウェブサーバーを使用せずにローカルでファイルをプレビューすると、シェイプは機能しません。

CORS の問題かどうか

開発者ツールは CORS エラーを特定するのに役立ちます。 Chrome では、コンソールから CORS の問題が通知されます。 Firefox では、プロパティを調べると、画像が読み込めないという警告が表示されます。これは、画像が CORS のためにシェイプのソースとして使用できないという事実を警告するはずです。

しきい値の設定

shape-image-threshold プロパティを使用すると、完全な透明ではない領域からシェイプを作成することができます。 shape-image-threshold の値が 0.0 (初期値) の場合、領域は完全に透明になります。値が 1.0 の場合は完全に不透明です。中間の値は、半透明領域を定義領域として設定できることを意味します。

次の例では、最初の例と同様の画像を使用していますが、この画像では、星の背景が完全に透明ではなく、グラフィックプログラムで 20% の不透明度に作成されています。 shape-image-threshold を 0.3 に設定すると図形が表示され、 0.2 より小さい値に設定すると、図形がなくなります。

生成コンテンツの画像を使用

上記の例では、画像を shape-outside の値として使用し、ページにも追加しました。多くのデモでは、従っているシェイプを見せるためにこれを行っていますが、 shape-outside プロパティはページに表示される画像とは関係がないため、画像を使用してシェイプを作成するために、画像を表示する必要はありません。

何かを浮動状態にする必要がありますが、以下の例のように生成コンテンツを使用することもできます。ここでは生成コンテンツを浮動状態にし、大きな星形の画像を使ってコンテンツを整形していますが、ページ上には何も画像を表示していません。

グラデーションを用いたシェイプの作成

CSS グラデーションは画像として扱われるので、透過や半透過の領域をグラデーションの一部として持つことで、グラデーションを使ってシェイプを作ることができます。

次の例では、直線グラデーションの背景画像によって与えられた生成された浮動状態のコンテンツを使用しています。 shape-outside の値と同じ値を使用しています。直線グラデーションは紫色から透明に変化しますので、 shape-image-threshold の値を変更すると、どれくらいのピクセルがシェイプを作成するのに必要かを決めることができます。以下の例で値を操作することで、その値に応じてシェイプを横切る対角線がどれだけ移動するかを確認することができます。

背景画像を完全に削除してみることもでき、そうすればグラデーションは純粋にシェイプを作成するために使用され、ページには全く表示されません。

次の例では、楕円形の放射状のグラデーションを使用し、グラデーションの透過部分を再利用してシェイプを作成しています。

これらのライブサンプルで直接実験して、グラデーションを変更するとシェイプのパスがどのように変化するかを確認することができます。