Comment embellir les personnages en utilisant CSS3

CSS n'est pas seulement une technologie, mais aussi un art Si vous l'utilisez bien, vous pouvez l'utiliser pour créer divers effets magiques. Avec les progrès de la technologie des navigateurs modernes, l'innovation de CSS3 , et donne également aux programmeurs plus d'espace et la possibilité d'utiliser leurs propres caprices. Alors comment embellir un demi-personnage avec CSS. En fait, il s'agit de diviser un personnage en deux moitiés, une moitié est de style A et l'autre moitié est de style B. Bien sûr, tout le monde sait que qu'il s'agisse d'un caractère chinois ou d'un caractère occidental, un seul caractère ne peut pas être séparé. C'est la dernière unité de texte. S'il s'agit d'embellir un demi-mot ou une demi-phrase, je suppose que tout le monde sait comment. pour le faire. Également très courant. Mais comment embellir la moitié d’un personnage ? Bien sûr, il existe un moyen, ce qu’il faut ici, c’est l’art.

Regardez d'abord les rendus requis :

Le côté gauche est une couleur, le côté droit est une couleur. Si vous utilisez des images, c'est bien sûr très simple, mais les images ont des limites, comme l'impossibilité de générer dynamiquement des styles de caractères. Voyons comment obtenir cet effet en utilisant du CSS pur.

L'idée de base d'embellir la moitié d'un personnage avec CSS

L'idée est très simple, il suffit d'écrire un mot deux fois et d'en afficher respectivement la moitié. L’idée est très claire et simple, mais comment la mettre en œuvre ? Bien sûr, vous ne pouvez pas vraiment écrire un mot deux fois. C'est trop stupide, et lorsque l'utilisateur copie et colle ce texte, deux copies du même texte seront collées. Ici, vous devez utiliser des pseudo-éléments CSS : avant et :après. Rappelez-vous le mot « pseudo » dans ce « pseudo-élément », indiquant qu'il n'existe pas à l'origine. Notre méthode consiste à placer le même caractère dans le pseudo-élément, seule la moitié est affichée, et l'autre moitié du caractère original est affichée, et enfin ils sont combinés en un seul mot.

Code CSS

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}

Code HTML

<p>单个字符</p>
<span class="halfStyle lazy " data-content="风">风</span>
<span class="halfStyle lazy " data-content="流">流</span>
<span class="halfStyle lazy " data-content="倜">倜</span>
<span class="halfStyle lazy " data-content="傥">傥</span>

<hr/>
<p>用脚本自动美化：</p>

<span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span>

Tout ce que vous avez à faire est d'appliquer la classe .halfStyleCSS à chaque personnage qui a besoin d'une demi-embellissement. Dans l'exemple de code ci-dessus, chaque span contient un caractère, nous y plaçons l'attribut data, tel que data-content="wind", puis nous utilisons la méthode attr(data-content) dans le pseudo-élément, donc ce .halfStyle:before deviendra dynamique, sans que vous ayez besoin de coder en dur leur contenu manuellement.

Pour les situations où plusieurs personnages doivent être embellis, nous pouvons créer un morceau de code jQuery pour ajouter automatiquement cet effet à tous les caractères avec la classe .textToHalfStyleCSS :

jQuery(function($) {
    var text, chars, $el, i, output;

    // 遍历所有字符
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('
        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">&#39; 
        + text + &#39;</span>&#39;
        );

        // Reset output for appending
        output = &#39;&#39;;

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += &#39;<span aria-hidden="true" data-content="&#39; + chars[i] + &#39;">&#39; + chars[i] + &#39;</span>&#39;;
        }

        // Write to DOM only once
        $el.append(output);
    });
});

De cette façon , qu'il s'agisse d'un morceau de texte ou de Nous pouvons faire tout le texte en une seule fois, sans avoir à le configurer manuellement un par un ou à faire des images une par une !

Approche avancée : les moitiés gauche et droite du texte sont générées à l'aide de pseudo-éléments

Dans notre approche ci-dessus, la moitié gauche du texte est générée à l'aide du pseudo-élément :before, tandis que la moitié droite utilise la Parole originale. Mais en fait, nous pouvons générer les côtés gauche et droit avec des pseudo-éléments - la moitié droite est implémentée avec :after.

Code CSS

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

Vous constaterez que notre méthode de mise en œuvre peut être très flexible. Maintenant, il y a trois mots qui se chevauchent sur la surface, et nous pouvons faire en sorte que chaque mot en occupe 1/3, de cette façon, j'obtiens un mot en trois couleurs. Les exemples ci-dessus utilisent tous une séparation des couleurs gauche et droite. En fait, nous pouvons également lui donner une séparation des couleurs supérieure et inférieure ou une séparation des couleurs supérieure, moyenne et inférieure.

Il en va de même pour les programmeurs Web. Nous sommes les seuls à être habitués à explorer et à innover. Il existe de nombreuses tâches que nous pouvons accomplir de manière plus simple et plus pratique. Ressentez-vous la même chose ?

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!