0

В фигме есть такой текст:

введите сюда описание изображения

В фигме это реализовано наложением друг на друга нескольких слоев текста. Можно ли это сделать на CSS?

1

3 ответа 3

1

Вот типа того, но не знаю как сделать градиент горизонтальный.

p {
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow:3px 3px 10px red,-3px -3px 10px yellow;
}
<p>25000 Dollars</p>

1

body { background-image: linear-gradient(to right, #24293f, #293c5c); }

h1 {
  position: relative;
  font: 64px/1em 'Arial Black', sans-serif;
  text-align: center;
  color: #fff;
}
h1::before {
  content: '25 000 RUB';
  position: absolute;
  z-index: -1;
  text-align: center;
  background-image: linear-gradient(to right, #f53d5c, #79a9ec);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 5px transparent;
  text-stroke: 5px transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(2px);
}
<h1>25 000 RUB</h1>

0

Вот пример с svg: https://codepen.io/sethjenks/pen/KpNJZp

Хотя мне кажется твой пример слишком кастомный и его можно было вставить как картинку в вёрстку. Если нужно, чтоб можно было выделять, можно поверх картинки белый текст сделать, подогнав.

Моя идея: сделать 2 слоя с одинаковым текстом, используя абсолютное позиционирование. Верхний слою сделать color: #fff. А нижнему слою задать linear-gradient. Если делать такую штуку для каждой буквы, можно замарочиться и сделать красиво. Вот я что-то пробовал, может наводки какие-то даст.

.text {
  position: relative;
  font-family: sans-serif;
 
}

.text-down {
  position: absolute;
  font-size: 72px;
  background-image: -webkit-linear-gradient(-180deg, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: 0;
}

.text-up {
  position: absolute;
  top: 1.5px;
  color: #fff;
  font-size: 68px;
  letter-spacing: 2px;
}
<div class="text">
<span class="text-down">25 000 РУБ</span>
<span class="text-up">25 000 РУБ</span>
</div>

Интересный вопрос, не сталкивался с таким.

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.