Lo que estoy buscando:

Una forma de darle estilo a la MITAD de un personaje. (En este caso, la mitad de la letra es transparente)

Lo que he buscado y probado actualmente (sin suerte):

• Métodos para diseñar la mitad de un carácter / letra
• Diseñar parte de un personaje con CSS o JavaScript
• Aplicar CSS al 50% de un personaje

A continuación se muestra un ejemplo de lo que estoy tratando de obtener.

¿Existe una solución CSS o JavaScript para esto, o tendré que recurrir a las imágenes? Preferiría no seguir la ruta de la imagen ya que este texto terminará siendo generado dinámicamente.

ACTUALIZAR:

Como muchos han preguntado por qué querría diseñar la mitad de un personaje, esta es la razón. Mi ciudad había gastado recientemente $ 250,000 para definir una nueva "marca" para sí misma. Este logo es lo que se les ocurrió. Muchas personas se han quejado de la simplicidad y falta de creatividad y continúan haciéndolo. Mi objetivo era crear este sitio web como una broma. Escriba 'Halifax' y verá lo que quiero decir.

¡Ahora en GitHub como complemento!

Siéntase libre de bifurcar y mejorar.

Demo | Descargar Zip | Half-Style.com (redirige a GitHub)

• CSS puro para un solo personaje
• JavaScript utilizado para la automatización en texto o caracteres múltiples
• Preserva la accesibilidad de texto para lectores de pantalla para personas ciegas o con discapacidad visual

Parte 1: solución básica

Demostración: http://jsfiddle.net/arbel/pd9yB/1694/

Esto funciona en cualquier texto dinámico, o un solo carácter, y está todo automatizado. Todo lo que necesita hacer es agregar una clase en el texto de destino y el resto se encargará.

Además, la accesibilidad del texto original se conserva para los lectores de pantalla para personas ciegas o con discapacidad visual.

Explicación para un solo personaje:

CSS puro. Todo lo que necesita hacer es aplicar la .halfStyleclase a cada elemento que contiene el carácter que desea que tenga un estilo medio.

Para cada elemento span que contenga el carácter, puede crear un atributo de datos, por ejemplo aquí data-content="X", y en el uso del pseudoelemento content: attr(data-content);para que la .halfStyle:beforeclase sea dinámica y no necesite codificarlo en cada instancia.

Explicación de cualquier texto:

Simplemente agregue textToHalfStyleclase al elemento que contiene el texto.

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

( Demostración JSFiddle )

Parte 2: Solución avanzada: partes izquierda y derecha independientes

Con esta solución, puede diseñar las partes izquierda y derecha, de forma individual e independiente .

Todo es igual, solo CSS más avanzado hace la magia.

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>

( Demostración JSFiddle )

Parte 3: Combina y combina

Ahora que sabemos lo que es posible, creemos algunas variaciones.

-Medias horizontales

• Sin sombra de texto:

  

• Posibilidad de Text Shadow para cada media parte de forma independiente:

  

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

( Demostración JSFiddle )

-Vertical 1/3 piezas

• Sin sombra de texto:

  

• Posibilidad de sombra de texto para cada 1/3 parte de forma independiente:

  

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

( Demostración JSFiddle )

-Horizontal 1/3 piezas

• Sin sombra de texto:

  

• Posibilidad de sombra de texto para cada 1/3 parte de forma independiente:

  

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

( Demostración JSFiddle )

-Mejora a mitad de estilo por @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>

( Demostración JSFiddle )

-PeelingStyle mejora de HalfStyle por @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>

( Demostración JSFiddle y en samtremaine.co.uk )

Parte 4: Listo para producción

Se pueden usar diferentes conjuntos de estilos de medio estilo personalizados en los elementos deseados en la misma página. Puede definir varios conjuntos de estilos y decirle al complemento cuál usar.

El complemento utiliza el atributo de datos data-halfstyle="[-CustomClassName-]"en los .textToHalfStyleelementos de destino y realiza todos los cambios necesarios automáticamente.

Entonces, simplemente en el elemento que contiene el texto, agregue textToHalfStyleclase y atributo de datos data-halfstyle="[-CustomClassName-]". El complemento hará el resto del trabajo.

Además, las definiciones de clase de los conjuntos de estilos CSS coinciden con la [-CustomClassName-]parte mencionada anteriormente y están encadenadas .halfStyle, por lo que tendremos.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>

( Demostración JSFiddle )

¡Acabo de terminar de desarrollar el complemento y está disponible para que todos lo usen! Esperamos que lo disfrutes.

Ver proyecto en GitHub - Ver el sitio web del proyecto . (para que pueda ver todos los estilos divididos)

Uso

En primer lugar, asegúrese de que la jQuerybiblioteca esté incluida. La mejor manera de obtener la última versión de jQuery es actualizar su etiqueta de cabeza con:

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

Después de descargar los archivos, asegúrese de incluirlos en su proyecto:

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

Margen

Todo lo que tiene que hacer es asignar la clase splitchar, seguido del estilo deseado al elemento que envuelve su texto. p.ej

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

Una vez hecho todo esto, solo asegúrese de llamar a la función jQuery en su archivo de documento listo de esta manera:

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

Personalización

Para que el texto se vea exactamente como lo desea, todo lo que tiene que hacer es aplicar su diseño de esta manera:

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

¡Eso es! Ahora tienes el Splitcharcomplemento listo. Más información al respecto en http://razvanbalosin.com/Splitchar.js/ .

Editar (octubre de 2017): background-clipo mejor dicho background-image options, ahora son compatibles con todos los principales navegadores: CanIUse

Sí, puede hacer esto con un solo carácter y solo CSS.

Sin embargo, solo Webkit (y 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>

Visualmente, todos los ejemplos que usan dos caracteres (ya sea a través de JS, pseudo elementos CSS o solo HTML) se ven bien, pero tenga en cuenta que todo agrega contenido al DOM que puede causar accesibilidad, así como la selección / corte de texto / pegar problemas

JSFiddle DEMO

¡Lo haremos usando solo pseudo selectores CSS!

Esta técnica funcionará con contenido generado dinámicamente y diferentes tamaños y anchos de fuente.

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

Para ajustar la cadena generada dinámicamente, puede usar una función como esta:

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

Puede ser irrelevante, tal vez no, pero hace algún tiempo, creé una función jQuery que hace lo mismo, pero horizontalmente.

Lo llamé "Strippex" Para 'stripe' + 'text', demo: http://cdpn.io/FcIBg

No digo que esta sea la solución de ningún problema, pero ya intenté aplicar css a la mitad de un personaje, pero horizontalmente, por lo que la idea es la misma, la realización puede ser horrible, pero funciona.

Ah, y lo más importante, ¡me divertí mucho creándolo!

Si estás interesado en esto, entonces Glitch de Lucas Bebber es un efecto muy similar y súper genial:

Creado usando un simple SASS Mixin como

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

Más detalles en los trucos CSS de Chris Coyer y la página Codepen de Lucas Bebber

Aquí una implementación fea en lienzo. Intenté esta solución, pero los resultados son peores de lo que esperaba, así que aquí está de todos modos.

$("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>

Lo más cerca que puedo llegar:

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

Demostración: http://jsfiddle.net/9wxfY/2/

Aquí hay una versión que solo usa un lapso: http://jsfiddle.net/9wxfY/4/

Acabo de jugar con la solución de @ Arbel:

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>

Otra solución solo para CSS (aunque se necesita un atributo de datos si no desea escribir CSS con letras específicas). Este funciona más en todos los ámbitos (Probado IE 9/10, Chrome más reciente y FF más reciente)

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>

Solución limitada de CSS y jQuery

No estoy seguro de cuán elegante es esta solución, pero corta todo exactamente a la mitad: http://jsfiddle.net/9wxfY/11/

De lo contrario, he creado una buena solución para usted ... Todo lo que necesita hacer es tener esto para su HTML:

Eche un vistazo a esta edición más reciente y precisa a partir del 13/06/2016: http://jsfiddle.net/9wxfY/43/

En cuanto al CSS, es muy limitado ... Solo necesita aplicarlo a :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/

Puede utilizar este código para hacer todo tipo de cosas interesantes: esta es solo una implementación que mi asociado y yo ideamos anoche.

Una buena solución exclusiva de WebKit que aprovecha el background-clip: textsoporte: 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;
}

¿Qué tal algo como esto para un texto más corto?

Incluso podría funcionar para texto más largo si hicieras algo con un bucle, repitiendo los caracteres con JavaScript. De todos modos, el resultado es algo como esto:

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, aquí está mi opinión sobre esto haciéndolo solo con CSS: http://codepen.io/ricardozea/pen/uFbts/

Varias notas:

• La razón principal por la que hice esto fue para probarme a mí mismo y ver si podía lograr el estilo de la mitad de un personaje al tiempo que proporcionaba una respuesta significativa al OP.

• Soy consciente de que esta no es una solución ideal o más escalable y las soluciones propuestas por la gente aquí son mucho mejores para escenarios del "mundo real".

• El código CSS que creé se basa en los primeros pensamientos que se me ocurrieron y en mi enfoque personal del problema.

• Mi solución solo funciona en caracteres simétricos, como X, A, O, M. ** No funciona en caracteres asimétricos como B, C, F, K o letras minúsculas.

• ** SIN EMBARGO, este enfoque crea 'formas' muy interesantes con caracteres asimétricos. Intente cambiar la X a una K o una letra minúscula como una h o una p en el CSS :)

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

También puede hacerlo usando SVG, si lo desea:

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

Esto se puede lograr con solo el :beforeselector CSS y 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>

>> Ver en jsFiddle

Puedes usar el siguiente código. Aquí, en este ejemplo, utilicé la h1etiqueta y agregué un atributo data-title-text="Display Text"que aparecerá con un texto de color diferente en el h1elemento de texto de la etiqueta, lo que da efecto al texto de medio color como se muestra en el ejemplo a continuación

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>

¡Solo para el récord en la historia!

He encontrado una solución para mi propio trabajo desde hace 5-6 años, que es Gradext (javascript puro y css puro, sin dependencia).

La explicación técnica es que puede crear un elemento como este:

<span>A</span>

ahora, si desea hacer un degradado en el texto, debe crear varias capas, cada una coloreada individualmente y el espectro creado ilustrará el efecto de degradado.

por ejemplo, mira esta es la palabra lorem dentro de ay<span> causará un efecto de gradiente horizontal ( verifique los ejemplos ):

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

y puede continuar haciendo este patrón durante mucho tiempo y también en un párrafo largo.

¡Pero!

¿Qué sucede si desea crear un efecto de gradiente vertical en los textos?

Luego hay otra solución que podría ser útil. Lo describiré en detalles.

Asumiendo nuestro primero de <span>nuevo. pero el contenido no debería ser las letras individualmente; el contenido debe ser todo el texto, y ahora vamos a copiar el mismo <span>una y otra vez (recuento de tramos definirá la calidad de su gradiente, mayor envergadura, un mejor resultado, pero los malos resultados). Echa un vistazo a esto:

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

De nuevo, pero!

¿Qué pasa si desea hacer que estos efectos de degradado se muevan y creen una animación?

bueno, hay otra solución para eso también. ¡Definitivamente debe verificar animation: trueo incluso el .hoverable()método que conducirá a un gradiente para comenzar según la posición del cursor! (suena bien xD)

así es simplemente cómo estamos creando gradientes (lineales o radiales) en los textos. Si le gustó la idea o quiere saber más al respecto, debe consultar los enlaces provistos.

Tal vez esta no sea la mejor opción, tal vez no sea la mejor manera de hacer esto, pero abrirá algo de espacio para crear animaciones emocionantes y deliciosas para inspirar a otras personas a una mejor solución.

¡Le permitirá usar el estilo de degradado en los textos, que es compatible incluso con IE8!

Aquí puede encontrar una demostración en vivo en funcionamiento y el repositorio original también está aquí en GitHub, código abierto y listo para recibir algunas actualizaciones (: D)

Esta es mi primera vez (sí, después de 5 años, lo has escuchado bien) mencionar este repositorio en cualquier lugar de Internet, ¡y estoy emocionado por eso!

[Actualización: agosto de 2019:] Github eliminó la demostración de páginas de github de ese repositorio porque soy de Irán. Solo el código fuente está disponible aquí aunque ...