Shape-image-порог - CSS-хитрощі

shape-image-thresholdВластивість CSS встановлює, які пікселі включаються у форму зображення, коли shape-outsideвикористовується для визначення плаваючої області елемента CSS.

Скажімо, ми використовуємо лінійний градієнт для визначення площі плаваючої фігури CSS. Щось на зразок цього, коли ми переходимо від однотонного до прозорого під кутом 45 °:

Зазвичай ми визначаємо це як background-imageелемент. Якщо ми плаваємо за цим елементом і опускаємо поруч якийсь вміст, градієнт і вміст розташовуються поруч.

Але якщо ми переставляємо background-imageна shape-outside, ми більше не будемо бачити градієнт, але розсекречувати зміст навколо нього , де пікселі градієнта є прозорими.

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

Цього разу ми включимо градієнт, щоб побачити, як це працює.

Бачиш це? Оголосивши shape-image-thresholdдругу фігуру та встановивши для неї значення .15, ми включили пікселі, які перевищують непрозорість понад 15%, у зону поплавця, що дозволяє вмісту перекривати фігуру.

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

Синтаксис

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

Застосовується до: floats
Успадковано: ні
Початкове значення: 0,0
Тип анімації: число

Цінності

shape-image-thresholdВластивість приймає одну альфа - значення в діапазоні від 0 до 1, де 0 є еквівалентом рівня непрозорості 0% (повністю прозорий) і 1 є еквівалентом рівня непрозорості 100% (без прозорості). Початкове значення - 0,0.