How to beautify characters using CSS3

CSS is not only a technology, but also an art. If you use it well, you can use it to create various magical effects. With the advancement of modern browser technology, the innovation of CSS3 , and also gives programmers greater space and possibility to use their own whims. So how to beautify half a character with CSS. In fact, it is to split a character in half, half is A style, and half is B style. Of course, everyone knows that whether it is a Chinese character or a Western character, a single character cannot be separated. They are the latest unit of text. If it is to beautify half a word or half a sentence, I guess everyone knows how to do it. Also very common. But how to beautify half a character? Of course there is a way, what is needed here is art.

First look at the required renderings:

The left side is a color and the right side is a color. If you use pictures, this is of course very easy, but pictures have limitations, such as the inability to dynamically generate character styles. Let’s take a look at how to achieve this effect using pure CSS.

The basic idea of ​​beautifying half a character with CSS

The idea is very simple, that is, write a word twice and display half of it respectively. The idea is very clear and simple, but how to implement it? Of course, you can't really write a word twice. This is too stupid, and when the user copies and pastes this text, two copies of the same text will be pasted. Here you need to use CSS pseudo elements: before and :after. Remember the word "pseudo" in this "pseudo element", indicating that it does not originally exist. Our method is to place the same character in the pseudo element, only half of it is displayed, and the other half of the original character is displayed, and finally they are combined into one word.

CSS code

.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;
}

HTML code

<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>

All you need to do is apply the .halfStyleCSS class to each character that needs half beautification. In the above code example, each span contains a character, we place the data-attribute on it, such as data-content="wind", and then we use the attr(data-content) method in the pseudo-element , so that .halfStyle:before will become dynamic, without you needing to hardcode their contents manually.

For situations where multiple characters need to be beautified, we can create a piece of jQuery code to automatically add this effect to all .textToHalfStyleCSS class characters:

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);
    });
});

In this way, whether it is a paragraph of text or the entire article We can get the text done at once. We don’t have to set it up one by one manually, and we don’t have to make pictures one by one!

Advanced approach: both the left and right half characters are generated using pseudo-elements

In our approach above, the left half of the text is generated using the :before pseudo-element, while the right half uses the original Word. But in fact we can use pseudo elements to generate both the left and right sides - the right half is implemented using :after.

CSS code

.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 */
}

You will find that our implementation method can be very flexible. Now there are three overlapping words on the surface. We can let each word occupy 1/3, so that , I get a three-color word. The above examples all use left and right color separation. In fact, we can also make it have upper and lower color separation or upper, middle and lower color separation.

The same is true for web programmers. As long as we are used to explore and innovate, there are many tasks that we can complete in simpler and more convenient ways. Do you feel the same way?

The above is the detailed content of How to beautify characters using CSS3. For more information, please follow other related articles on the PHP Chinese website!