Was ich suche:

Eine Möglichkeit, eine HÄLFTE eines Charakters zu stylen . (In diesem Fall ist die Hälfte des Buchstabens transparent)

Was ich aktuell gesucht und ausprobiert habe (ohne Glück):

• Methoden zum Stylen eines halben Zeichens / Buchstabens
• Styling eines Teils eines Zeichens mit CSS oder JavaScript
• Wenden Sie CSS auf 50% eines Zeichens an

Unten ist ein Beispiel dafür, was ich versuche zu erhalten.

Gibt es dafür eine CSS- oder JavaScript-Lösung oder muss ich auf Bilder zurückgreifen? Ich würde es vorziehen, nicht auf die Bildroute zu gehen, da dieser Text dynamisch generiert wird.

AKTUALISIEREN:

Da viele gefragt haben, warum ich jemals einen halben Charakter stylen möchte, ist dies der Grund. Meine Stadt hatte kürzlich 250.000 US-Dollar ausgegeben, um eine neue "Marke" für sich selbst zu definieren. Dieses Logo haben sie sich ausgedacht. Viele Menschen haben sich über die Einfachheit und den Mangel an Kreativität beschwert und tun dies auch weiterhin. Mein Ziel war es, diese Website als Witz zu erfinden. Geben Sie 'Halifax' ein und Sie werden sehen, was ich meine.

Jetzt auf GitHub als Plugin!

Fühlen Sie sich frei zu gabeln und zu verbessern.

Demo | Laden Sie Zip | herunter Half-Style.com (Weiterleitung zu GitHub)

• Reines CSS für ein einzelnes Zeichen
• JavaScript zur Automatisierung von Text oder mehreren Zeichen
• Erhält die Zugänglichkeit von Text für Bildschirmleser für Blinde oder Sehbehinderte

Teil 1: Grundlösung

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

Dies funktioniert mit jedem dynamischen Text oder einem einzelnen Zeichen und ist allesamt automatisiert. Alles was Sie tun müssen, ist eine Klasse zum Zieltext hinzuzufügen und der Rest ist erledigt.

Auch für Bildschirmleser für Blinde oder Sehbehinderte bleibt die Zugänglichkeit des Originaltextes erhalten.

Erklärung für ein einzelnes Zeichen:

Reines CSS. Alles, was Sie tun müssen, ist, .halfStyleKlasse auf jedes Element anzuwenden , das das Zeichen enthält, das Sie halb gestylt haben möchten.

Für jedes span-Element, das das Zeichen enthält, können Sie beispielsweise hier ein Datenattribut erstellen data-content="X"und das Pseudoelement verwenden, content: attr(data-content);damit die .halfStyle:beforeKlasse dynamisch ist und Sie es nicht für jede Instanz fest codieren müssen.

Erklärung für jeden Text:

Fügen Sie textToHalfStyledem Element, das den Text enthält, einfach eine Klasse hinzu .

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

( JSFiddle-Demo )

Teil 2: Erweiterte Lösung - Unabhängige linke und rechte Teile

Mit dieser Lösung können Sie linke und rechte Teile einzeln und unabhängig gestalten .

Alles ist gleich, nur fortgeschritteneres CSS zaubert.

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

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

( JSFiddle-Demo )

Teil 3: Mix-Match und Verbesserung

Nachdem wir nun wissen, was möglich ist, erstellen wir einige Variationen.

-Horizontale Halbteile

• Ohne Textschatten:

  

• Möglichkeit des Textschattens für jeden halben Teil unabhängig:

  

// 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: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 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 bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  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 */
}

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

( JSFiddle-Demo )

-Vertikale 1/3 Teile

• Ohne Textschatten:

  

• Möglichkeit des Textschattens für jeden 1/3 Teil unabhängig:

  

// 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 { /* base char and also the right 1/3 */
    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 */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 33.33%;
    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 middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    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 #af0; /* for demo purposes */
}

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

( JSFiddle-Demo )

-Horizontale 1/3 Teile

• Ohne Textschatten:

  

• Möglichkeit des Textschattens für jeden 1/3 Teil unabhängig:

  

// 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 { /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  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 #fa0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  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 #af0; /* for demo purposes */
}

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

( JSFiddle-Demo )

-HalfStyle-Verbesserung von @KevinGranger

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

body {
    background-color: black;
}

.textToHalfStyle {
    display: block;
    margin: 200px 0 0 0;
    text-align: center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position: relative;
    display: inline-block;
    width: 1;
    font-size: 70px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;
}

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

( JSFiddle-Demo )

-PeelingStyle Verbesserung von HalfStyle durch @SamTremaine

// 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: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

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

( JSFiddle-Demo und auf samtremaine.co.uk )

Teil 4: Produktionsbereit

Benutzerdefinierte verschiedene Half-Style-Stilsätze können für gewünschte Elemente auf derselben Seite verwendet werden. Sie können mehrere Stilsätze definieren und dem Plugin mitteilen, welches verwendet werden soll.

Das Plugin verwendet Datenattribute data-halfstyle="[-CustomClassName-]"für die Zielelemente .textToHalfStyleund nimmt alle erforderlichen Änderungen automatisch vor.

Fügen Sie also einfach für das Element, das den Text enthält, die textToHalfStyleKlasse und das Datenattribut hinzu data-halfstyle="[-CustomClassName-]". Das Plugin erledigt den Rest der Arbeit.

Auch die Klassendefinitionen der CSS-Stilsätze stimmen mit dem [-CustomClassName-]oben genannten Teil überein und sind verkettet .halfStyle, so dass wir haben werden.halfStyle.[-CustomClassName-]

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

/* start half-style hs-base */

.halfStyle.hs-base {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}

.halfStyle.hs-base:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow: hidden;
    color: #f00; /* for demo purposes */
}

/* end half-style hs-base */


/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent;
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    height: 33.33%;
    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 #fa0; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 66.66%;
    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 #af0; /* for demo purposes */
}

/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
  display: block;
  margin: 200px 0 0 0;
  text-align: center;
}

.halfStyle.hs-KevinGranger {
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;
}

/* end half-style hs-KevinGranger

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

( JSFiddle-Demo )

Ich habe gerade die Entwicklung des Plugins abgeschlossen und es steht jedem zur Verfügung! Hoffe es wird euch gefallen.

Projekt auf GitHub anzeigen - Projektwebsite anzeigen . (so können Sie alle geteilten Stile sehen)

Verwendungszweck

Stellen Sie zunächst sicher, dass die jQueryBibliothek enthalten ist. Der beste Weg, um die neueste jQuery-Version zu erhalten, besteht darin, Ihr Head-Tag zu aktualisieren mit:

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

Stellen Sie nach dem Herunterladen der Dateien sicher, dass Sie sie in Ihr Projekt aufnehmen:

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

Markup

Alles, was Sie tun müssen, ist, die Klasse splitchar, gefolgt vom gewünschten Stil, dem Element zuzuweisen, das Ihren Text umschließt . z.B

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

Nachdem dies alles erledigt ist, stellen Sie einfach sicher, dass Sie die jQuery-Funktion in Ihrer dokumentbereiten Datei wie folgt aufrufen:

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

Customizing

Damit der Text genau so aussieht, wie Sie es möchten, müssen Sie Ihr Design nur folgendermaßen anwenden:

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

Das ist es! Jetzt haben Sie das SplitcharPlugin fertig. Weitere Informationen dazu unter http://razvanbalosin.com/Splitchar.js/ .

Bearbeiten (Oktober 2017): background-clipoder besser gesagt, background-image optionswerden jetzt von allen gängigen Browsern unterstützt: CanIUse

Ja, Sie können dies mit nur einem Zeichen und nur CSS tun.

Nur Webkit (und Chrome):

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>

Visuell sehen alle Beispiele, die zwei Zeichen verwenden (sei es über JS, CSS-Pseudoelemente oder nur HTML), gut aus. Beachten Sie jedoch, dass alle dem DOM Inhalte hinzufügen, die die Barrierefreiheit beeinträchtigen können - sowie Textauswahl / -schnitt / Probleme einfügen.

JSFiddle DEMO

Wir machen das nur mit CSS-Pseudo-Selektoren!

Diese Technik funktioniert mit dynamisch generierten Inhalten und verschiedenen Schriftgrößen und -breiten.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

Um die dynamisch generierte Zeichenfolge zu umbrechen, können Sie eine Funktion wie die folgende verwenden:

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;

    el.innerHTML = wrapString(txt);
}

Es mag irrelevant sein, vielleicht auch nicht, aber vor einiger Zeit habe ich eine jQuery-Funktion erstellt, die dasselbe tut, aber horizontal.

Ich nannte es "Strippex" Für 'Stripe' + 'Text', Demo: http://cdpn.io/FcIBg

Ich sage nicht, dass dies die Lösung von Problemen ist, aber ich habe bereits versucht, CSS auf die Hälfte eines Zeichens anzuwenden, aber horizontal. Die Idee ist also dieselbe, die Erkenntnis mag schrecklich sein, aber es funktioniert.

Ah, und das Wichtigste, ich hatte Spaß daran!

Wenn Sie daran interessiert sind, dann ist Lucas Bebbers Glitch ein sehr ähnlicher und super cooler Effekt:

Erstellt mit einem einfachen SASS Mixin wie

.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

Weitere Informationen finden Sie auf den CSS-Tricks von Chris Coyer und auf der Codepen-Seite von Lucas Bebber

Hier eine hässliche Implementierung in Leinwand. Ich habe diese Lösung ausprobiert, aber die Ergebnisse sind schlechter als erwartet, also hier ist es trotzdem.

$("div").each(function() {
  var CHARS = $(this).text().split('');
  $(this).html("");
  $.each(CHARS, function(index, char) {
    var canvas = $("<canvas />")
      .css("width", "40px")
      .css("height", "40px")
      .get(0);
    $("div").append(canvas);
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop("0", "blue");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("0.51", "red");
    gradient.addColorStop("1.0", "red");
    ctx.font = '130pt Calibri';
    ctx.fillStyle = gradient;
    ctx.fillText(char, 10, 130);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>

Am nächsten kann ich kommen:

$(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});

body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

Demo: http://jsfiddle.net/9wxfY/2/

Hier ist eine Version, die nur eine Spanne verwendet: http://jsfiddle.net/9wxfY/4/

Ich habe gerade mit @ Arbels Lösung gespielt:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

Eine weitere reine CSS-Lösung (obwohl Datenattribute benötigt werden, wenn Sie kein buchstabenspezifisches CSS schreiben möchten). Dieser funktioniert auf ganzer Linie (Getesteter IE 9/10, Chrome neueste & FF neueste)

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}

<span data-char="X">X</span>

Begrenzte CSS- und jQuery-Lösung

Ich bin mir nicht sicher, wie elegant diese Lösung ist, aber sie halbiert alles genau: http://jsfiddle.net/9wxfY/11/

Ansonsten habe ich eine nette Lösung für Sie erstellt ... Alles, was Sie tun müssen, ist dies für Ihr HTML zu haben:

Schauen Sie sich diese neueste und genaue Bearbeitung vom 13.06.2016 an: http://jsfiddle.net/9wxfY/43/

Das CSS ist sehr begrenzt ... Sie müssen es nur anwenden :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

http://experimental.samtremaine.co.uk/half-style/

Sie können diesen Code dazu zwingen, alle möglichen interessanten Dinge zu tun - dies ist nur eine Implementierung, die mein Mitarbeiter und ich gestern Abend entwickelt haben.

Eine nette Nur-WebKit-Lösung, die die background-clip: textUnterstützung nutzt : http://jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

Wie wäre es mit so etwas für kürzeren Text?

Es könnte sogar für längeren Text funktionieren, wenn Sie etwas mit einer Schleife machen und die Zeichen mit JavaScript wiederholen. Wie auch immer, das Ergebnis ist ungefähr so:

p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}

<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>

FWIW, hier ist meine Meinung dazu, wie ich es nur mit CSS mache: http://codepen.io/ricardozea/pen/uFbts/

Mehrere Anmerkungen:

• Der Hauptgrund, warum ich dies getan habe, war, mich selbst zu testen und zu sehen, ob ich in der Lage war, die Hälfte eines Charakters zu stylen und gleichzeitig eine aussagekräftige Antwort auf das OP zu geben.

• Mir ist bewusst, dass dies keine ideale oder skalierbarste Lösung ist und die von den Menschen hier vorgeschlagenen Lösungen für Szenarien der "realen Welt" weitaus besser sind.

• Der von mir erstellte CSS-Code basiert auf den ersten Gedanken, die mir in den Sinn kamen, und meiner persönlichen Herangehensweise an das Problem.

• Meine Lösung funktioniert nur mit symmetrischen Zeichen wie X, A, O, M. ** Sie funktioniert nicht mit asymmetrischen Zeichen wie B, C, F, K oder Kleinbuchstaben.

• ** Dieser Ansatz erzeugt jedoch sehr interessante 'Formen' mit asymmetrischen Zeichen. Versuchen Sie, das X in ein K oder einen Kleinbuchstaben wie ein h oder ein p zu ändern im CSS zu :)

HTML

<span class="half-letter"></span>

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

Sie können dies auch mit SVG tun, wenn Sie möchten:

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);

<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

http://codepen.io/nicbell/pen/jGcbq

Dies kann nur mit CSS :beforeSelector und erreicht werden content property value.

.halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;

}



/* For Horizontal cut off */ 

.halfed1:before   {
  width: 100%;
  height: 55%;
  
}

<div class="halfed"> X </div>

<div class="halfed1"> X </div>

>> Siehe auf jsFiddle

Sie können den folgenden Code verwenden. Hier in diesem Beispiel habe ich ein h1Tag verwendet und ein Attribut hinzugefügt, data-title-text="Display Text"das mit einem anderen h1Farbtext auf dem Tag-Textelement angezeigt wird, wodurch ein halbfarbiger Effekt erzielt wird, wie im folgenden Beispiel gezeigt

body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}

<h1 data-title-text="Display Text">Display Text</h1>

Nur für den Rekord in der Geschichte!

Ich habe vor 5-6 Jahren eine Lösung für meine eigene Arbeit gefunden, Gradext (reines Javascript und reines CSS, keine Abhängigkeit).

Die technische Erklärung ist, dass Sie ein Element wie das folgende erstellen können:

<span>A</span>

Wenn Sie nun einen Verlauf für Text erstellen möchten, müssen Sie mehrere Ebenen erstellen, die jeweils einzeln farbig sind. Das erstellte Spektrum veranschaulicht den Verlaufseffekt.

Schauen Sie sich zum Beispiel an, dass dies das Wort Lorem in a ist <span>und einen horizontalen Verlaufseffekt verursacht ( siehe Beispiele ):

 <span data-i="0" style="color: rgb(153, 51, 34);">L</span>
 <span data-i="1" style="color: rgb(154, 52, 35);">o</span>
 <span data-i="2" style="color: rgb(155, 53, 36);">r</span>
 <span data-i="3" style="color: rgb(156, 55, 38);">e</span>
 <span data-i="4" style="color: rgb(157, 56, 39);">m</span>

und Sie können dieses Muster auch für eine lange Zeit und einen langen Absatz fortsetzen.

Aber!

Was ist, wenn Sie einen vertikalen Verlaufseffekt für Texte erstellen möchten ?

Dann gibt es noch eine andere Lösung, die hilfreich sein könnte. Ich werde im Detail beschreiben.

Nehmen wir <span>wieder unsere erste an. aber der Inhalt sollte nicht die Buchstaben einzeln sein; der Inhalt soll der gesamte Text, und jetzt werden wir das gleiche kopieren <span>immer wieder (Anzahl der Spannweiten werden die Qualität des Farbverlaufes, mehr Spannweite, besseres Ergebnis, aber schlechte Leistung definieren). Guck dir das an:

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

Wieder aber!

Was ist, wenn Sie diese Verlaufseffekte verschieben und daraus eine Animation erstellen möchten?

Nun, es gibt auch eine andere Lösung dafür. Sie sollten auf jeden Fall überprüfen animation: trueoder sogar die .hoverable()Methode, die dazu führt, dass ein Gradient basierend auf der Cursorposition gestartet wird! (klingt cool xD)

Auf diese Weise erstellen wir einfach Farbverläufe (linear oder radial) für Texte. Wenn Ihnen die Idee gefallen hat oder Sie mehr darüber erfahren möchten, sollten Sie die bereitgestellten Links überprüfen.

Vielleicht ist dies nicht die beste Option, vielleicht nicht die beste Art, dies zu tun, aber es wird Raum schaffen, um aufregende und entzückende Animationen zu erstellen, die andere Menschen zu einer besseren Lösung inspirieren.

Sie können den Verlaufsstil für Texte verwenden, der sogar von IE8 unterstützt wird!

Hier finden Sie eine funktionierende Live-Demo und das ursprüngliche Repository ist auch hier auf GitHub, Open Source und bereit, einige Updates zu erhalten (: D)

Dies ist mein erstes Mal (ja, nach 5 Jahren haben Sie es richtig gehört), dass ich dieses Repository irgendwo im Internet erwähne, und ich freue mich darüber!

[Update - August 2019:] Github hat die Github-Seiten- Demo dieses Repositorys entfernt, weil ich aus dem Iran komme! Hier ist nur der Quellcode verfügbar , um ...