Закрыть ... [X]

Как сделать цвет тексту в css

Добавлено: 11.09.2018, 04:57 / Просмотров: 42383

Это возможно сделать средствами 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) }

Вариантов совместного использования фильтров ограничивает только ваша фантазия и вкус стиля.


Источник: https://artkiev.com/blog/css-invert-font-color.htm


Color


Как сделать цвет тексту в css

Похожие новости


Для чего 10 солевой раствор в домашних условиях
Ободок своими руками детям
Страна мастеров кукол своими руками
Как правильно сварить ворота своими руками
Как сшить бабочку ребенку своими руками
Как сделать прическу на длинный волос пошаговая инструкция



ШОКИРУЮЩИЕ НОВОСТИ