В фигме есть такой текст:
В фигме это реализовано наложением друг на друга нескольких слоев текста. Можно ли это сделать на CSS?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот типа того, но не знаю как сделать градиент горизонтальный.
p {
font-size: 40px;
font-weight: bold;
color: white;
text-shadow:3px 3px 10px red,-3px -3px 10px yellow;
}
<p>25000 Dollars</p>
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>
Вот пример с 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>
Интересный вопрос, не сталкивался с таким.