Как с помощью css сделать широкую цифру с цветовым градиентом, как изображенно на картинке?
2 ответа
Только шрифт поменить
body{
font-family:Helvetica,serif;
}
<svg height="100" width="200">
<defs>
<linearGradient id="grad" x1="80%" y1="0%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="100%" style="stop-color:lightgreen;stop-opacity:1" />
</linearGradient>
</defs>
<text x="0" y="75" font-size="100" font-weight="900" fill="url(#grad)">1</text>
</svg>
Если используется svg
. то наиболее простым способом является команда масштабирования scale(X Y)
Увеличение ширины цифры на 30% - scale(1.3 1)
Увеличение на 50% - scale(1.5 1)
<style>
body{
font-family:sans-serif;
}
</style>
<svg height="300" width="300">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#9BF1B6;" />
<stop offset="100%" style="stop-color:#B4F89A;" />
</linearGradient>
</defs>
<text transform="scale(1 1)" x="0" y="75" font-size="100" font-weight="900" fill="url(#grad)">1</text>
<text transform="translate(-5 0) scale(1.3 1)" x="0" y="150" font-size="100" font-weight="900" fill="url(#grad)">1</text>
<text transform="translate(-15 0) scale(1.5 1)" x="0" y="225" font-size="100" font-weight="900" fill="url(#grad)">1</text>
</svg>
Адаптивный вариант со стилями в CSS
Работает во всех браузерах:
svg text{
font-family:sans-serif;
font-size:100px;
font-weight:900px;
fill:url(#grad);
}
<svg height="100%" width="100%" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin meet">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#B4F89A;" /> #B4F89A
<stop offset="100%" style="stop-color:#B4389A;" />
</linearGradient>
</defs>
<text transform="scale(1 1)" x="0" y="75" >1</text>
<text transform="translate(-18 0) scale(1.5 1)" x="0" y="150">1</text>
<text transform="translate(-36 0) scale(2 1)" x="0" y="225">1</text>
</svg>