A method of CSS3 to implement character beautification

Source: Internet
Author: User
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; /* deal with spaces */}.halfstyle:before {    display:block;    z-index:1;    Position:absolute;    top:0;    left:0;    width:50%;    Content:attr (data-content); /* Dynamic acquisition of pseudo-elements */    Overflow:hidden;    Color: #f00;}

HTML code

<p> single character </p><span class= "Halfstyle lazy" data-content= "Wind" > Wind </span><span class= "Halfstyle Lazy "data-content=" stream > Stream </span><span class= "Halfstyle lazy" data-content= "shelters" > Shelters </span><span class= "Halfstyle lazy" data-content= "Huatang" > Huatang </span><hr/><p> Auto-beautify with script: </p><span class= " Texttohalfstyle lazy "> Love easy Marriage, and the line and cherish. </span>

All you need to do is apply the. Halfstylecss class to each character that needs to be beautified. In the above code example, each span contains a character, we put the data-property on it, such as data-content= "Wind", and then in the pseudo-element we used the attr (data-content) method, so. Halfstyle: Before will become dynamic and do not require you to hard-code their content manually.

For situations where multiple characters need to be beautified, we can create a jquery code that automatically adds all of the. Texttohalfstylecss class characters 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 EAC h character and append to container            output + = ' <span aria-hidden= "true" data-content= "' + chars[i ' + '" > ' + Cha Rs[i] + ' </span> ';        }        Write to DOM only once        $el. Append (output);    });

In this way, whether it is a paragraph of text or the whole text, we can be done at once, do not have to manually set a one, do not have to do a diagram!

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 would 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; /* 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, would 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 overlap, we can make each word accounted for 1/3, so that I get a three-color word. The above examples are left and right color separations, in fact, we can also make it up and down color separations or the upper and lower separations.

As a web programmer, there are many tasks we can accomplish in a simpler and more convenient way, only if we are used for exploration and innovation. Do you have the same feeling?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: