Comment puis-je appliquer du CSS à la moitié d'un personnage, en rendant la moitié transparente ?

Application croisée pour demi-caractère

Question

Comment appliquer du CSS sur la moitié d'un caractère, par exemple pour rendre la moitié du personnage transparente ?

Ce problème a été essayé à travers les méthodes suivantes, mais toutes ont échoué :

• Méthodes pour embellir les caractères/la moitié des lettres
• Embellir une partie d'un caractère avec CSS ou JavaScript
• Appliquer CSS à 50 % Les caractères de

Voici un exemple de l'effet cible :

[Image]

Y a-t-il une solution CSS ou JavaScript pour obtenir cet effet ou est-ce que je faut-il recourir aux images ? Puisque le texte sera finalement généré dynamiquement, nous souhaitons éviter d’utiliser des images.

Solution

Démo | Télécharger zip | HalfStyle.com (redirection vers GitHub)

• CSS pur pour un seul personnage
• JavaScript Automatisation pour s'étendre sur du texte ou sur plusieurs caractères
• Préserver l'accessibilité du texte pour les lecteurs d'écran aveugles ou malvoyants

Partie 1 : Solution de base

[Image]

Démo : http://jsfiddle.net/arbel/pd9yB/1694/

Partie 2 : Automatisation de n'importe quel texte

[Image]

Démo : http://jsfiddle.net/arbel/pd9yB/1696/

Instructions :

• pour chaque personnage qui contient le semi-beau personnage que vous souhaitez. L'élément applique la classe .halfStyle.
• Pour chaque élément span contenant des caractères, créez ici un attribut de données, tel que data-content="X".
• Utilisez content:attr(data-content); sur le pseudo-élément afin que la classe .halfStyle:before soit dynamique et n'ait pas besoin d'être codée en dur pour chaque instance.

S'applique à n'importe quel texte :

• Ajoutez simplement la classe textToHalfStyle à l'élément contenant le texte.

Code

JavaScript (mode automatisation) :

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span>

CSS :

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}

HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

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!