What I am looking for:

A way to style one HALF of a character. (In this case, half the letter being transparent)

What I have currently searched for and tried (With no luck):

Methods for styling half of a character/letter

Styling part of a character with CSS or JavaScript

Apply CSS to 50% of a character

Below is an example of what I am trying to obtain.

Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.

---

UPDATE:

Since many have asked why I would ever want to style half of a character, this is why. My city had recently spent $250,000 to define a new "brand" for itself. This logo is what they came up with. Many people have complained about the simplicity and lack of creativity and continue to do so. My goal was to come up with this website as a joke. Type in 'Halifax' and you will see what I mean. :)

---

Now on GitHub as a Plugin!

Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

---

Pure CSS for a Single Character

JavaScript used for automation across text or multiple characters

Preserves Text Accessibility for screen readers for the blind or visually impaired

Part 1: Basic Solution

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

---

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X" , and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance.

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.

---

// 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 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" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

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

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

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

---

I've just finished developing the plugin and it is available for everyone to use! Hope you will enjoy it.

View Project on GitHub - View Project Website. (so you can see all the split styles)

Usage

First of all, make sure you have the jQuery library is included. The best way to get the latest jQuery version is to update your head tag with:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

After downloading the files, make sure you include them in your project:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

Markup

All you have to do is to asign the class splitchar , followed by the desired style to the element wrapping your text. eg

<h1 class="splitchar horizontal">Splitchar</h1>

After all this is done, just make sure you call the jQuery function in your document ready file like this:

$(".splitchar").splitchar();

Customizing

In order to make the text look exactly as you want it to, all you have to do is apply your design like this:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }

That's it! Now you have the Splitchar plugin all set. More info about it at http://razvanbalosin.com/Splitchar.js/.

---

Edit (oct 2017): background-clip or rather background-image options are now supported by every major browser: CanIUse

Yes, you can do this with only one character and only CSS.

Webkit (and Chrome) only, though:

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>X</h1>

链接地址: http://www.djcxy.com/p/590.html

上一篇: 如何创建一个函数装饰器链？

下一篇: 是否可以将CSS应用于角色的一半？