Подскажите, пожалуйста, как в слове WHITE в каждой букве установить разную жирность.
Рисунок ниже:
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМожно сделать так:
<p>
<span style='font-weight: 900; color: rgb(0, 0, 0);'>W</span>
<span style='font-weight: 700; color: rgb(43, 43, 43);'>H</span>
<span style='font-weight: 500; color: rgb(104, 104, 104);'>I</span>
<span style='font-weight: 400; color: rgb(165, 165, 165);'>T</span>
<span style='font-weight: 100; color: rgb(201, 201, 201);'>E</span>
</p>
там все же больше идет эффект из за разницы цвета у букв, а не из за жирности шрифта
opacity
, чтобы текст был более универсальным (то есть работал в большем кол-ве кейсов).
p {
background: linear-gradient(90deg, #000 0, #cecece 80%, #fff 100%);
-moz-background-clip: text;
-webkit-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 700;
font-size: 50px;
display: inline-block;
}
<p>IMAGE</p>