Changer la taille du texte et la couleur progressivement

Question

Je veux savoir s'il est possible de changer la taille du texte et la couleur progressivement sur la même ligne, comme ceci:

Je souhaite utiliser CSS uniquement si possible . Toute autre solution, qui au moins ne me force pas à mettre chaque lettre dans son propre sens, est également la bienvenue.

Answer 1

Qu'en est-il de la transformation et du dégradé sans tous ces balises :

 body {
  perspective: 250px;
  perspective-origin: bottom;
}

div {
  font-size: 70px;
  background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: rotateY(70deg);
  transform-origin: left;
} 

 <div>
  Lorem Ipsum Lorem
</div> 

Answer 2

Cela dépend vraiment de votre balisage HTML. Vous ne pouvez pas le faire avec du texte "Lorem ipsum", mais vous pouvez le faire si chaque lettre est enveloppé dans son propre élément assez simplement:

body > span {
  font-size: 72px;
}

span > span {
  font-size: 85%;
  opacity: 0.8;
}

<span>
  L<span>
    o<span>
      r<span>
        e<span>
          m <span>
            i<span>
              p<span>
                s<span>
                  u<span>
                    m
                  </span>
                </span>
              </span>
            </span>
          </span>
        </span>
      </span>
    </span>
  </span>
</span>

Vous n'aurez probablement pas être en mesure de le faire sans modifier le balisage existant ou d'en introduire un peu de JavaScript pour faire cela pour vous, cependant.

Comme pour la couleur, vous pouvez modifier l' opacity de chaque lettre avec cette approche (comme pour l'exemple ci-dessus), mais je ne suis pas sûr si cela est possible aussi facilement sans avoir à appliquer un style à chaque lettre individuellement.

Answer 3

À l'aide de James Donnelly réponse avec un peu de JS:

format = ([head, ...tail]) => {
    if(tail.length == 0)
        return "<span>" + head + "</span>";
    return "<span>" + head + format(tail) + "</span>";
}

var el = document.querySelector(".test");

el.innerHTML = format(el.innerText)

.test > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

<div class="test">
    Lorem ipsum
</div>

Answer 4

inspiré de @James Donnelly's réponse

cette solution plus dynamique , s'étend sera généré à l'aide de javascript

la caisse le code

document.addEventListener('DOMContentLoaded', function()
{ 
    var fooDiv = document.getElementsByClassName("foo")[0];
    var text = fooDiv.innerHTML.trim();
    var textToSpans = "";
    var textLength = text.length;
    for(var i=0;i<textLength;i++){
        textToSpans += "<span>" + text[i];
    }

    for(i=0;i<textLength;i++){
        textToSpans += "</span>";
    }
    fooDiv.innerHTML = textToSpans;

    //change the class so if this code run again this div will not effected
    fooDiv.className = "bar";

}, false);

.bar > span {
    font-size: 72px;
}

span > span {
    font-size: 85%;
    opacity: 0.8;
}

<div class="foo">
    Lorem ips
</div>

Answer 5

var GradientLetters = class {
  constructor(id, fontSizeStep) {
    this.element = document.getElementById(id);
    this.fontSizeStep = fontSizeStep;  
    this.letters = document.getElementById(id).innerText.split("");
    document.getElementById(id).innerText = "";
    this.makeGradient();
  }
  makeGradient() {
    this.letters.forEach((currentValue, index) => {
      let span = document.createElement("SPAN");
      span.innerText = currentValue;
      span.style.color = "rgba(0, 0, 0, " + (1 / index) + ")";
      span.style.fontSize = 60 - (index * 2) + "px";
      this.element.appendChild(span);
		});
  }
}
let gradientLetters = new GradientLetters("gradient-letters", 10);

p {
  font-family: Arial;
}

<p id="gradient-letters">Lorem ip</p>

Impossible. Sans emballage les lettres à l'intérieur des balises HTML tout simplement Vous ne pouvez pas modifier les propriétés CSS de ces lettres. La seule chose que j'ai trouvé, c'est l' ::first-letter sélecteur, pour la première lettre, pas le suivant.

Explication dans le contexte CSS

CSS font-size Propriété et le CSS de la couleur de la Propriété sont des propriétés que vous pouvez définir dans le contexte de sélecteurs.

Les sélecteurs sont des modèles qui correspondent à l'encontre des éléments dans un arbre, et, comme ces différentes technologies qui peuvent être utilisées pour sélectionner des nœuds dans un document.

Ainsi, la définition des propriétés CSS sans pointant vers des éléments (dans ce cas, l'élément HTML) ne semble pas être possible.

À L'Aide De JavaScript

À l'aide de JavaScript est possible de découper une chaîne (Dans ce cas, le innerText d'un Élément HTML comme un paragraphe) dans les lettres, l'emballage de ces lettres dans des Éléments HTML et puis, le style de ces Éléments avec les CSS de plusieurs façons. Dans ce cas, doit être mieux défini CSS par programmation.