How Can I Apply CSS to Half a Character, Making One Half Transparent?

Cross application for half character

Question

How to apply CSS to half of a character, for example to make half of the character transparent?

This problem has been tried to be viewed through the following methods, but all failed:

• Methods to beautify characters/half of letters
• Beautify part of a character with CSS or JavaScript
• Apply CSS to 50% The characters of

Here is an example of the target effect:

[Image]

Is there a CSS or JavaScript solution to achieve this effect or do I have to resort to images ? Since the text will eventually be generated dynamically, we want to avoid using images.

Solution

Demo | Download zip | HalfStyle.com (redirect to GitHub)

• Pure CSS for a single character
• JavaScript Automation for spanning text or multiple characters
• Preserving text accessibility for blind or visually impaired screen readers

Part 1: Basic Solution

[Picture]

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

Part 2: Automation of any text

[Image]

Demo: http://jsfiddle.net/arbel/pd9yB/1696/

Instructions:

• for each character that contains the semi-beautiful character you want The element applies the .halfStyle class.
• For each span element that contains characters, create a data attribute, such as data-content="X" here.
• Use content:attr(data-content); on the pseudo-element so that the .halfStyle:before class is dynamic and does not need to be hardcoded for each instance.

Applies to any text:

• Just add the textToHalfStyle class to the element containing the text.

Code

JavaScript (automation mode):

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

The above is the detailed content of How Can I Apply CSS to Half a Character, Making One Half Transparent?. For more information, please follow other related articles on the PHP Chinese website!