Comment styliser la moitié d’un personnage avec Pure CSS ?

Comment appliquer du CSS à la moitié d'un personnage

Contexte :

Vous cherchez une solution pour en styliser un la moitié d'un personnage, le rendant transparent dans ce cas. Les tentatives précédentes utilisant des méthodes telles que le style d'une partie d'un caractère avec CSS ou JavaScript ont échoué. Une solution basée sur l'image n'est pas souhaitable en raison de la nature dynamique du texte.

Solution : Half-Style

Présentation de Half-Style :

Half-Style est une solution qui offre un style CSS pur pour un seul caractère ou une automatisation basée sur JavaScript sur plusieurs caractères. Il maintient l'accessibilité pour les lecteurs d'écran.

Partie 1 : Solution de base (un seul caractère)

Appliquez simplement la classe ".halfStyle" au caractère que vous souhaitez styliser, ainsi qu'un attribut « data-content » contenant la valeur du caractère.

Exemple :

<code class="html"><span class="halfStyle" data-content="X">X</span></code>

Partie 2 : Solution automatisée

Pour plusieurs caractères ou texte dynamique, utilisez la classe ".textToHalfStyle" sur l'élément parent et appliquez JavaScript pour générer les éléments stylisés.

Extrait de code :

<code class="javascript">// jQuery for automated mode
$('.textToHalfStyle').each(function(idx, el) {
  var text = $(el).text(),
      chars = text.split(''),
      output = '';

  for (var i = 0; i < chars.length; i++) {
    output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
  }

  $(el).append(output);
});</code>

CSS :

<code class="css">.halfStyle {
  font-size: 80px;
  color: black;
  white-space: pre;
}

.halfStyle:before {
  display: block;
  width: 50%;
  content: attr(data-content);
  color: #f00;
}</code>

Démo en direct : https://jsfiddle.net/arbel/pd9yB/1694/

Plugin Github : https://github.com/arbel/half-style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!