PLAY CSS
jaen

レイアウト

shape-image-threshold

shape-image-threshold は、shape-outside に画像を書いたとき、どのくらい不透明な部分を形に含めるかを、0 から 1 の数で指定します。

構文

<opacity-value>

プレビュー

12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  display: block;
}

.box > :nth-child(2) {
  float: left;
  width: 8em;
  height: 8em;
  background: linear-gradient(
    to bottom right,
    #4a86cb,
    #4a86cb00
  );
  shape-outside: linear-gradient(
    to bottom right,
    #4a86cb,
    #4a86cb00
  );
  shape-image-threshold: 0.5;
}

コントロール

shape-image-threshold0.5
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。

解説

値の意味

  • 数値：不透明度がこの値より大きいところを形にします。初期値は 0 で、少しでも色のあるところはすべて形に入ります。0.5 なら半分より濃いところだけ、1 にすると形は空になり、文章は項目を避けずに、項目に重なって並びます。0 より小さい値や 1 より大きい値は、0 と 1 として扱われます。
  • %：50% は 0.5 と同じです。Chrome・Edge・Firefox だけが対応していて、Safari では宣言ごと無視されます。

気をつけること

  • shape-outside に画像（url() やグラデーション）を書いたときだけ効きます。図形や箱で形を決めたときは関係ありません。
  • 見るのは画像の透明度だけで、色の明るさは関係ありません。

このページのプレビューでは、2 番目の項目を補助の宣言で左に回り込ませ、左上から右下へ透けていくグラデーションを背景と shape-outside の両方に書いています。値を上げるほど、濃い左上の部分だけが形になり、文章が斜めに入り込みます。

参考リンク

MDN Web Docsshape-image-thresholdSpecificationCSS Shapes Module Level 1Can I useshape-image-threshold

コメント

PLAY CSS