0

Подскажите как реализовать такой цвет букв с помощью css.

123

3 ответа 3

4

Могу предложить так(возможно, не все сочетания и комбинации цветов вижу):

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#e74c3c 49%, #c0392b 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
span{
  background: -webkit-linear-gradient(#ff7675 49%, #c0392b 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>В ЛЕ<span>ТО</span></h1>

4
  • В IE не работает( нужен кроссбраузерный способ 19 июн 2018 в 21:52
  • @RafaelShepard, Ну знаете, тут не фриланс, а помощь.
    – user207618
    19 июн 2018 в 21:52
  • @Other чего вообще? зачем этот набор слов? я как раз за помощью и пишу, т.к. не знаю как такое реализовать. 19 июн 2018 в 22:05
  • @RafaelShepard вам намекают что дальнейшие действия вы можете загуглите самостоятельно 20 июн 2018 в 7:23
2

Это геморой, но если включить фантазию то получится вот так

span {
  font-family: Helvetica;
  font-weight: 900;
  font-size: 40px;
}

.parent {
  position: relative;
}

.parent p {
  position: absolute;
  top: 0;
}

p:first-child {
  color: red;
  z-index: 5;
}

p.blue {
  overflow: hidden;
  top: -20px;
  z-index: 10;
}

p:last-child span {
  display: block;
  color: blue;
  transform: translateY(20px);
}
<div class="parent">
  <p><span>Hei man</span></p>
  <p class="blue"><span>Hei man</span></p>
</div>

1
  • прикольная идея с наложением)! спасибо! 20 июн 2018 в 14:25
2

Вот так кроссбраузерно(до IE9 включительно). По другому: либо дублирование текста(вариант Максима Ленского), либо картинкой. В общем, лёгких путей тут не будет.

#resources {
  width:0;
  height:0;
  overflow:hidden;
}

button {
  display: inline-block;
  background-color: #fea857;
  border: 8px solid;
  box-sizing: border-box;
  text-align: center;
  font-size: 30px;
  border-color: #fedca2 #fec885 #db8646 #db8646;
  cursor:pointer;
}

button svg {
  display: block;
  margin: auto;
  width: 200px;
  height: 40px;
}

button text {
  font-family:sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  text-anchor: middle;
  fill: url(#gradient);
}
<svg id="resources">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0" x2="0%" y2="100%" gradientUnits="objectBoundingBox">
      <stop offset="50%" stop-color="#f83618" />
      <stop offset="50%" stop-color="#ac1e12" />
    </linearGradient>
  </defs>
</svg>

<button>
  <svg>    
    <text x="100" y="30">в лето</text>
  </svg>
</button>

1
  • Так. сейчас сяду разбираться) спасибо) 20 июн 2018 в 14:22

Ваш ответ

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

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