Форма-изображение-порог - CSS-хитрости

Свойство CSS shape-image-thresholdустанавливает, какие пиксели включаются в форму изображения, когда shape-outsideиспользуется для определения плавающей области элемента CSS.

Допустим, мы используем линейный градиент для определения плавающей области фигуры CSS. Примерно так, когда мы переходим от сплошного цвета к прозрачному под углом 45 °:

Обычно мы определяем это как background-imageэлемент. Если мы разместим этот элемент и поместим рядом с ним какое-то содержимое, градиент и контент будут располагаться бок о бок.

Но если мы переставляем background-imageна shape-outside, мы больше не будем видеть градиент, но рассекречивать содержание вокруг него , где пиксели градиента являются прозрачными.

Но предположим, мы думаем, что текст должен немного приближать фигуру. Вот куда мы можем добраться shape-image-threshold. Мы можем использовать его, чтобы настроить, где контент естественным образом обтекает прозрачные пиксели, включая пиксели, которые являются полупрозрачными. Например, shape-image-thresholdзначение .3 будет включать пиксели, которые более чем на 30% непрозрачны в плавающей области фигуры.

На этот раз мы добавим градиент, чтобы увидеть, как это работает.

Видеть, что? Объявив shape-image-thresholdвторую фигуру и установив для нее значение 0,15, мы включили пиксели с непрозрачностью более 15% в плавающую область, что позволяет содержимому слегка перекрывать форму.

Это также работает, когда мы определяем внешнюю форму с помощью фактического файла изображения, который использует прозрачность. Та же сделка, только другая форма для работы.

Синтаксис

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )

Применимо к: поплавки
Унаследовано: нет
Начальное значение: 0,0
Тип анимации: номер

Значения

shape-image-thresholdСвойство принимает одну альфа - значение в диапазоне от 0 до 1, где 0 является эквивалентом уровня непрозрачности 0% (полностью прозрачный) и 1 является эквивалентом уровня непрозрачности 100% (без прозрачности). Начальное значение 0,0.