Comment appliquer des CSS à la moitié d'un caractère ?
Le langage CSS offre beaucoup de possibilités aux personnes souhaitant rendre leurs sites plus agréables et beaux. Il est notamment possible d'utiliser le CSS pour ne modifier que la moitié d'un caractère et avoir ainsi une lettre avec deux couleurs de chaque côté, verticalement (autre astuce CSS Comment définir les cellpadding et cellspacing en CSS ?).
La technique pour appliquer une CSS sur la moitié d'un caractère est d'utiliser le pseudo-élément :before. Cet élément du CSS permet d'insérer du contenu avant l'élément. En donnant à cet élément le même contenu que l'élément de base et en le fixant sur la moitié gauche de la lettre, on obtient deux classes pour chaque moitié du caractère, et on peut ainsi changer librement chaque partie.
Pour que le contenu de la moitié gérée par l'élément :before soit dynamique, la méthode la plus simple consiste à stocker dans un attribut inutilisé en HTML, par exemple contenu, le même contenu que le caractère. Exemple :
<span class=styleSurLaMoitie contenu=A>A</span>
Le CSS sera écrit de cette manière :
.styleSurLaMoitie { /* Gère la partie droite de la lettre */
/** Positionnement de la lettre sur une ligne fixe pour qu'il n'y ait pas de décalage avec l'autre moitié **/
position:relative;
display:inline-block;
font-size:50px; /* On peut utiliser ici n'importe quelle taille */
color: black; /* On peut utiliser ici n'importe quelle couleur */,
overflow:hidden; /** Indique que toute partie qui dépasse ne sera pas visible */
white-space: pre; /* Évite d'effacer les espaces entre les lettres */
}
.styleSurLaMoitie:before { /* Gère la partie gauche de la lettre */
display:block;
z-index:1; /* Indique que la moitié gauche sera située par-dessus la lettre initiale */
/* Le positionnement a lieu en haut à gauche de la lettre */
position:absolute;
top:0;
left:0;
width: 50%; /* La largeur de la partie gauche ne fait que la moitié de la largeur de la lettre */
content: attr(contenu); /* Le contenu est fixé dynamiquement à partir du contenu de l'attribut contenu */
overflow:hidden;
color: red; /* On choisit ici la couleur de la partie gauche */
}
En utilisant l'autre pseudo-élément :after, qui permet d'ajouter du contenu après un élément, et en modifiant certaines propriétés, il est possible de diviser le texte en trois éléments et de le faire horizontalement.
Cette méthode suppose que l'on ajoute le span pour chaque lettre, ce qui peut être lourd. Grâce à la bibliothèque JavaScript jQuery, il est possible de créer une fonction qui le fait à partir d'un span qui encadrerait tout le texte :
<span class=texten2Moities>Chaque lettre a 2 couleurs, une sur chaque moitié !</span>
jQuery(function($) {
var text, chars, i, output;
// Grâce à la fonction each, le code s'appliquera à tous les textes ayant cette classe
$('.texten2Moities').each(function(idx, el) {
texte = $(el).text(); //On récupère le texte contenu dans le span
lettres = text.split(''); //On le divise en lettres
// Cette variable contiendra le nouveau texte
nouveauContenu = '';
// Pour chaque lettre
for (i = 0; i < lettres.length; i++)
{
// On crée un élément span avec la classe styleSurLaMoitie
nouveauContenu += '<span class=styleSurLaMoitie contenu=' + lettres[i] + '>' + lettres[i] + '</span>';
}
// On ajoute ce contenu à l'élément
$(el).append(nouveauContenu);
});
});