A method of CSS3 to implement character beautification

CSS is not only a technology, but also an art, if you use good, you can use it to create a variety of magical effects, with the progress of modern browser technology, CSS3 innovation, but also give the programmer more space and possibility to play their own ideas. So how to beautify half a character with CSS. It's actually splitting a character in half, half a style, and half a B style. Of course, we all know, whether it is Chinese characters or western characters, a single character can not be split, they are the latest unit of text, if it is to beautify half a word or half a sentence, it is estimated that everyone knows how to do, 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 what you need:

The left is a color, and the right is a color. It's easy to do this with pictures, but pictures have limitations, such as the inability to dynamically generate character styles. Let's take a look at how pure CSS can be used to achieve this effect.

The basic idea of CSS beautifying half character

The idea is simple, is a word written two times, respectively, showing half. The idea is clear and simple, but how can it be achieved? Of course, can not really write a word two times, this is too stupid, and when the user copy paste the text will be glued to the same text two copies. CSS pseudo-elements are used here: Before and: After, remember the "pseudo" character of this "pseudo-element", indicating that it does not exist. Our approach is to place the same characters in the pseudo-elements, showing only half, and the original characters showing the other half, and finally putting them into one word.

CSS Code

.halfStyle {

     Position:relative;

     Display:inline-block;

     Font-size:80px; /* Any width can be */

     Color: black; /* any color, or transparent */

     Overflow:hidden;

     White-space: pre; /* handles spaces */

}

.halfStyle:before {

     Display:block;

     Z-index: 1;

     Position:absolute;

     Top:0;

     Left:0;

     Width: 50%;

     Content: attr(data-content); /* Dynamically fetching content of pseudo-elements */

     Overflow:hidden;

     Color: #f00;

}

HTML code

<p>single character</p>

<span class="halfStyle lazy " data-content="风">风</span>

<span class="halfStyle lazy " data-content="Stream">Stream</span>

<span class="halfStyle lazy " data-content="倜">倜</span>

<span class="halfStyle lazy " data-content="傥">傥</span>

 

<hr/>

<p>Automatically beautify with scripts:</p>

 

<span class="textToHalfStyle lazy ">Love is easy and marriage is not easy, and it is cherished. </span>

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

For situations where multiple characters need to beautify, we can create a piece of jQuery code that automatically adds all the characters of the .textToHalfStyleCSS class to this effect:

jQuery(function($) {

     Var text, chars, $el, i, output;

 

     // traverse all characters

     $('.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);">'

         + text + '</span>'

         );

 

         // Reset output for appending

         Output = '';

 

         // 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 += '<span aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>';

         }

 

         // Write to DOM only once

         $el.append(output);

     });

});

In this way, whether it is a paragraph of text or the entire text, we can get it all at once, without having to manually set one by one, and do not have to do one by one!

High-level approach: half-character left and right are generated with pseudo-elements

In our practice, the left half of the text is generated using the before pseudo-element, while the right half uses the original text. But we can actually generate the left and right sides with pseudo-elements-----------with the

	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 words overlapping on the surface. We can make each word occupy 1/3 each, so that I get a tri-color word. The above examples are all left and right color separation, in fact, we can also let it up and down color separation or upper and lower color separation.
The same is true for web programmers. Only we use it for exploration and innovation. There are many tasks that we can do in a simpler and more convenient way. Do you feel the same?