2

Имеется 4 цвета: red, yellow, blue, green

Имеется динамичный текст длина которого постоянно меняется.

Вопрос: Как раскрасить 100% текста 25% каждого цвета?

2 ответа 2

4

body {
  background: silver;
  font-size: 2em;
}

span {
  background: linear-gradient(to right, red 25%, yellow 25%, yellow 50%, blue 50%, blue 75%, green 75%);
  color: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<span>Текст произвольной длины</span>

4
  • Хм. Мне казалось по формулировке, что ТС хотел раскрасить именно текст ¯\_(ツ)_/¯ 21 авг 2018 в 19:20
  • 1
    @Kir_Antipov, так я ж текст и раскрасил?
    – Qwertiy
    22 авг 2018 в 7:39
  • Столкнулась с проблемой в сафари для -webkit-background-clip: text;, появляются артефакты вокруг элемента, никак починить не могу..
    – kizoso
    23 авг 2018 в 11:09
  • @kizoso, у меня нет сафари. Попробуй со сглаживанием шрифта поиграться.
    – Qwertiy
    23 авг 2018 в 12:10
2

Когда-то я делал на JS разноцветный анимированный медленно переливающийся текст, но тогда моих знаний языка было меньше, и сейчас написал бы по-другому. Но может пригодиться:

var mytext = "Когда-то я делал на JS разноцветный анимированный медленно переливающийся текст, но тогда моих знаний языка было меньше, и сейчас написал бы по-другому. Но может пригодится. Скрипт рассчитан на разукраску статического текста, но это поправимо.";
var fontface = ["Arial", "Lucida Console", "Comic Sans Ms", "MS Sans Serif", "Arial Black", "verdana", "courier"],
st = 0,
out = document.getElementById("out"),
e = "";
for(i = 0; i < mytext.length; i ++)e += "<span id=p" + i + ">" + mytext[i] + "</span>";
out.innerHTML = e;
var st = sti = stb = 0, it = it1 = bt = bt1 = "";
for(i = 0; i < mytext.length; i++){
	var b2 = document.getElementById("p" + i);
	if(sti == 8){sti = 0; it = "<i>"; it1= "</i>"}else{it = it1 = ""};
	if(stb == 10){stb = 0; bt = "<b>"; bt1 = "</b>"}else{bt = bt1 = ""};
	b2.innerHTML = "<font face='" + fontface[st] + "'>" + it + bt + b2.innerHTML + bt1 + it1 + "</font>";
	st ++; sti ++; stb ++;
	if(st == fontface.length)st = 0;
}
function decorate(){
	for(i = 0; i < mytext.length; i ++){	
		var b1 = document.getElementById("p" + i),
		R = 176 + Math.floor(80 * Math.sin(i + st / 17)),
		G = 176 + Math.floor(80 * Math.sin(i / 2.7 + st / 10)),
		B = 176 + Math.floor(80 * Math.sin(i / 4.3 - st / 7));
		b1.style.color = "rgb(" + R + ", " + G + ", " + B + ")";
	}
	st++;
}
decorate();
setInterval("decorate()", 100); // если эту строку убрать, отключится анимация
<body bgcolor=#003>
<div id=out></div>
</body>

Скрипт рассчитан на разукраску статического текста, но это поправимо.

1
  • 2
    Ля, наркомания :D
    – De.Minov
    22 авг 2018 в 6:35

Ваш ответ

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

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