III, вы можете достигнуть такого эффекта, совмещая вместе такие свойства, как mix-blend-mode, text-shadow, background.
Например, вдавленный текст...
<figure>
<figcaption>Hi, you all!</figcaption>
<img src="https://picsum.photos/id/863/640/480">
</figure>
<style>
figure {
position: relative;
display: inline-block;
}
figure figcaption {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
margin: auto;
width: max-content;
height: max-content;
font: 900 500% system-ui;
/* далее вдавленный текст */
color: transparent;
background: rgb(0, 0, 0, 1);
mix-blend-mode: multiply;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow:
-1px 1px 1px rgba(255, 255, 255, 0.25),
-5px 5px 5px rgba(255, 255, 255, 0.75)
}
</style>
(Этот пример почему-то не работает в Firefox)
ЕЩЁ Более короткий код... (работает в Firefox)
<figure>
<figcaption>Hi, you all!</figcaption>
<img src="https://picsum.photos/id/863/640/480">
</figure>
<style>
figure {
position: relative;
display: inline-block;
}
figure figcaption {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
margin: auto;
width: max-content;
height: max-content;
font: 900 500% system-ui;
mix-blend-mode: multiply;
color: transparent;
text-shadow: -5px 5px 10px white, 0 0 0 #222;
}
</style>
