1

Всем привет! Как можно реализовать такой текст с помощью svg или css? введите сюда описание изображения

3
  • Svg обязательно?
    – Qwertiy
    31 июл 2022 в 18:42
  • текстексттекситекст
    – evo
    31 июл 2022 в 19:04
  • @Qwertiy svg или css без разницы
    – user482149
    31 июл 2022 в 21:00

2 ответа 2

0

в CSS используя mix-blend-mode

пример:

b{
background: url(some_image.png);
}
h1{
mix-blend-mode: lighten;
}
    <b><h1>abcd</h1></b>

рабочий пример и песочница есть там: https://webref.ru/css/mix-blend-mode

0

Можно что-то такое, но как повернуть, я не придумал. Если только через path вместо ellipse, но я не уверен, получится ли там responsive.

div {
  font-size: 2em;
  white-space: pre-wrap;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: .5em;
  line-height: 1.5em;
  font-weight: bold;
  font-family: sans-serif;
  width: fit-content;
  margin: auto;
  position: relative;
}

div::before, div::after {
  content: attr(aria-label);
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

div::before {
  color: transparent;
}

div::after {
  position: absolute;
  inset: 0;
  clip-path: ellipse(40% 35%);
}
<div aria-label="Текст
Текст текст текст
И ещё текст"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.