javascript - color - ¿Es posible aplicar CSS a la mitad de un personaje?

style javascript

Question

Lo que estoy buscando:

Una forma de estilizar una 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 estilizar la mitad de un personaje / letra
• Estilo 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á generándose de forma dinámica.

ACTUALIZAR:

Dado que muchos me 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" por sí misma. Este logo es lo que se les ocurrió. Muchas personas se han quejado de la simplicidad y la falta de creatividad y continúan haciéndolo. Mi objetivo era llegar a este website como una broma. Escribe ''Halifax'' y verás lo que quiero decir. :)

Answer 1

Edición (octubre de 2017): las background-image options background-clip o más bien background-image options ahora son compatibles con todos los navegadores principales: CanIUse

Sí, puedes hacerlo con un solo carácter y solo con CSS.

Sin embargo, Webkit (y Chrome) solo:

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 simplemente HTML) se ven bien, pero tenga en cuenta que todo esto agrega contenido al DOM que puede causar accesibilidad, así como la selección / corte / texto. pegar problemas

Answer 2

¡Ahora en GitHub como Plugin!

Siéntete libre de bifurcar y mejorar.

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

• CSS puro para un solo personaje
• JavaScript utilizado para la automatización de texto o varios caracteres
• Preserva la accesibilidad del texto para lectores de pantalla para ciegos o discapacitados visuales

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 todo está automatizado. Todo lo que necesita hacer es agregar una clase en el texto de destino y el resto está a cargo.

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

Explicación para un solo personaje:

CSS puro. Todo lo que necesita hacer es aplicar la clase .halfStyle a cada elemento que contenga el carácter que desea que tenga medio estilo.

Para cada elemento span que contenga el carácter, puede crear un atributo de datos, por ejemplo aquí data-content="X" , y en el pseudo elemento use content: attr(data-content); por lo tanto, el .halfStyle:before clase será dinámico y no necesitarás codificarlo en cada instancia.

Explicación de cualquier texto:

Simplemente agregue la clase textToHalfStyle 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 de JSFiddle )

Parte 2: Solución avanzada - Partes independientes izquierda y derecha

Con esta solución puede diseñar piezas de izquierda y derecha, individual e independientemente .

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 de JSFiddle )

Parte 3: Mix-Match y mejorar

Ahora que sabemos lo que es posible, vamos a crear algunas variaciones.

-Partes horizontales

• Sin sombra de texto:

• Posibilidad de Sombra de Texto para cada media parte independientemente:

// 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 de JSFiddle )

-Verticales 1/3 Partes

• Sin sombra de texto:

• Posibilidad de Sombra de Texto para cada 1/3 parte independientemente:

// 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 de JSFiddle )

-Horizontal 1/3 partes

• Sin sombra de texto:

• Posibilidad de Sombra de Texto para cada 1/3 parte independientemente:

// 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 de JSFiddle )

-HalfStyle Improvement 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 de 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>

( Demo de JSFiddle y en samtremaine.co.uk )

Parte 4: Listo para la producción

Se pueden utilizar diferentes conjuntos de estilos Half-Style personalizados en los elementos deseados en la misma página. Puede definir múltiples conjuntos de estilos y decirle al complemento cuál usar.

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

Entonces, simplemente en el elemento que contiene el texto, agregue la clase textToHalfStyle y el atributo data-halfstyle="[-CustomClassName-]" . El plugin hará el resto del trabajo.

También las definiciones de clase de los conjuntos de estilos CSS coinciden con la parte [-CustomClassName-] mencionada anteriormente y están encadenadas a .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 .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 .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 de JSFiddle )

Answer 3

Aquí una aplicació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>

Answer 4

Lo más cerca que puedo conseguir:

$(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 tramo: http://jsfiddle.net/9wxfY/4/

Answer 5

Otra solución solo para CSS (aunque se necesita un atributo de datos si no desea escribir CSS específico para cada letra). Este funciona más en todos los ámbitos (Tested 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>

Answer 6

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 ''banda'' + ''texto'', demo: http://cdpn.io/FcIBg

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

Ah, y lo más importante, ¡me divertí mucho al crearlo!

Answer 7

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 en la página Codepen de Lucas Bebber

Answer 8

¿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 así:

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>

Answer 9

Solución CSS y jQuery limitada

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 ti ... Todo lo que necesitas hacer es tener esto para tu HTML:

Eche un vistazo a esta edición más reciente y precisa al 13/6/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>

Answer 10

También puedes hacerlo usando SVG, si lo deseas:

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

Answer 11

DEMO de JSFiddle

¡Lo haremos usando solo pseudo selectores de 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 envolver la cadena generada dinámicamente, podría 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);
}

Answer 12

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>

Answer 13

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

Ver proyecto en GitHub - Ver Website proyecto. (para que puedas ver todos los estilos divididos)

Uso

En primer lugar, asegúrese de tener incluida la biblioteca jQuery . La mejor manera de obtener la última versión de jQuery es actualizar su etiqueta de cabecera 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>

Después de hacer todo esto, solo asegúrese de llamar a la función jQuery en su archivo de documento listo como este:

$(".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 la siguiente 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 plugin Splitchar todo listo. Más información al respecto en Website .

Answer 14

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

Answer 15

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 pude diseñar 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 la más escalable, y las soluciones propuestas por las personas aquí son mucho mejores para los escenarios del "mundo real".

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

• Mi solución solo funciona con caracteres simétricos, como X, A, O, M. ** No funciona con 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 a 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);
  }
}

Answer 16

Puede utilizar el código de abajo. Aquí, en este ejemplo, he usado la h1etiqueta y he agregado 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 medio color del texto como se muestra en el siguiente ejemplo

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>

Answer 17

Una buena solución solo para 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;
}

Answer 18

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

}

samtremaine.co.uk

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