CSS: Как сделать контрастный цвет тексту, который лежит на разноцветном фоне
Это возможно сделать средствами CSS без каких-либо скриптов и предварительной обработки. Да, технологии не стоят на месте :) Реализация очень простая и не требует даже использования в каком-либо виде популярного в наше время SVG.
Как перекрасить цвет шрифта на фото
Если внимательно читать MDN можно, примерно, понять режимы смешивания и увидеть различия между ними, хотя они практически все одинаковы. Наличие белого текста над изображением дает нам результат, который является инвертированным изображением, где текст перекрывает его. Для простых черно-белых изображений черный в исходном изображении становится белым, где у нас есть белый текст над ним, а белый в исходном изображении становится черным, когда над ним находится белый текст.
Для примера возьмем примитивный HTML код:
<div class="background"> <h2 contentEditable role='textbox' aria-multiline='true'> CSS<br>HTML<span>artkiev.com</span> </h2> </div>
И добавим к нему еще примитивный CSS:
.background { background: url(super_cat.jpg); width:800px; height:450px; } h2 { color: #FFF; mix-blend-mode: difference; font: 900 120px/120px Arial; text-align: center } span { display:block; font-size:80px }
Отлично получилось даже без программы Photoshop! И текст, и изображение могут быть изменены, и эффект сохраняется без необходимости какого-либо JavaScript или каких-либо изменений в CSS или SV-масках. Но это подходит для простых изображений. С более сложными необходимо применять дополнительные фильтры и смешивать их.
Например мы можем добавить нашему h2
-тегу такой css-фильтр в помощь:
h2 { filter: invert(1) grayscale(1) contrast(9) }
Вариантов совместного использования фильтров ограничивает только ваша фантазия и вкус стиля.
Другие публикации:
Написать комментарий через:
- Локальный блог
