[CSS] shape-image-thresholdプロパティでテキストの回り込みの形状を画像から抽出する際のしきい値を指定しよう!

1.shape-image-thresholdとは?

shape-image-thresholdプロパティはテキストの回り込みの形状を画像から抽出する際のしきい値を指定します。

値の指定方法は以下の通りです。

{ shape-image-threshold: 値; }

値の指定方法

2.shape-image-thresholdの使い方

それではshape-image-thresholdの使い方をみていきましょう。

.sample {
 width: 150px;
 height: 150px;
 float: left;
 background-image: linear-gradient(30deg, black, transparent 80%, transparent);
 shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
 shape-image-threshold: 0.2;
}

シェイプは画像ファイルではなく、線形グラデーションのbackground-imageを使用して定義されています。

同じグラデーションがshape-outsideプロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、shape-image-threadholdの値を0.2にして使用して作成しています。

他にも値を設定できるのでいろいろと試してみることをお勧めします!