CSS-live.ru

Cтатьи по тегу «режимы наложения в CSS»

Когда 255 × 0 не равно нулю

1

Перевод статьи When 255 × 0 does not Equal Zero с сайта danielcwilson.com для css-live.ru, автор — Дэниел Уилсон

Прежде всего, важная оговорка: я не эксперт в работе с цветами и в цветовых профилях мониторов. И я понимаю лишь самые очевидные различия между дефолтным цветовым пространством для веба — sRGB — и другими более новыми моделями. Мы обсудим оба случая, я объясню то, что знаю сам, и оставлю другим возможность (и ссылки) подключиться к разговору и объяснить лучше.

Ладно… с этим разобрались, теперь к делу (и, пожалуй… простите, что заранее проспойлерил, о чем будет статья): поговорим о математике режимов наложения!

О режимах наложения в CSS без тайн

5

Перевод статьи Blending Modes Demystified с сайта alistapart.com для css-live.ru. Автор — Джастин Макдауэл.

Веб-графика всё больше уходит от преобразований с потерей качества. Мы не хотим, чтобы изменения в дизайне или графике вредили исходному материалу. Таким образом, если нам понадобится откатить изменения или поменять что-то другое, оригинал сохранится.

Одна из последних возможностей, до которой дорвались дизайнеры — обработка изображения с режимами наложения. С режимами наложения легко добавить цвет, текстуру и иные специальные эффекты без необходимости ковыряться в графическом редакторе. Это экономит время, поскольку больше не приходится заново обрабатывать графику вручную при каждом изменении, и и избавляет от мучительной необходимости вспоминать точные параметры визуального стандарта, который, возможно, создан пару месяцев назад. Вместо этого графику можно аккуратно подключать, поддерживать и обрабатывать всего несколькими объявлениями CSS.

Что такое режимы наложения

Простые кроссбраузерные текстовые маски при помощи режимов наложения

1

Перевод статьи Easy Cross-Browser Text Masks with Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Есть много способов делать маски обрезки по тексту (оформление графики или эффекты внутри букв) в вебе, но все эти техники какие-то бессистемные: Chrome и Safari уже давно поддерживают -webkit-background-clip:text;, но это касается только двух браузеров; есть также SVG-техники, но они тоже имеют ограничения.

После экспериментирования с режимами наложения, я понял, что можно воспользоваться ими, чтобы создать маски обрезки по тексту, сделав «бутерброд» из текста и фоновых изображений. Одним из существенных преимуществ является то, что эта техника не только полностью кроссбраузерная (за исключением IE), но также по построению обеспечивает прогрессивное улучшение, с изящным запасным решением.