2819

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.

javascript html css Mathew MacLean
fuente

1

Los comentarios no son para discusión extendida; Esta conversación se ha movido al chat .

Yvette

66

Preguntaban "por qué" porque querían saber por qué usarían CSS y no SVG o un editor de imágenes. Nada que ver con las decisiones comerciales sobre su logotipo. Según su enlace a su logotipo, ¿por qué no recortó la X?

user9993

1

No me puedo quejar de este logo. Mucho mejor que ese maldito faro.

Parapluie

@Parapluie ¡Tendría que estar de acuerdo!

Mathew MacLean

2941

¡Ahora en GitHub como complemento!

ingrese la descripción de la imagen aquí 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

Medio estilo en texto

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>

Expandir fragmento

( Demostración JSFiddle )

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

Medio estilo en texto - avanzado - Con sombra de texto

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.

Mostrar fragmento de código

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>

Expandir fragmento

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

Mostrar fragmento de código

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

Expandir fragmento

( Demostración JSFiddle )

-Vertical 1/3 piezas

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

Mostrar fragmento de código

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

Expandir fragmento

( Demostración JSFiddle )

-Horizontal 1/3 piezas

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

Mostrar fragmento de código

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

Expandir fragmento

( Demostración JSFiddle )

-Mejora a mitad de estilo por @KevinGranger

halfStyle - KevinGranger

Mostrar fragmento de código

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

Expandir fragmento

( Demostración JSFiddle )

-PeelingStyle mejora de HalfStyle por @SamTremaine

halfStyle - SamTremaine

Mostrar fragmento de código

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

Expandir fragmento

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

halfStyle - Múltiple en la misma página

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>

Expandir fragmento

( Demostración JSFiddle )

Arbel
fuente

Los comentarios no son para discusión extendida; Esta conversación se ha movido al chat .

Yvette

77

Esto es muy genial. Vale la pena señalar que esta técnica rompe CSS de ajuste de palabras, espacios en blanco y espaciado de caracteres.

Andrew Ensley

2

Es bueno ver que hemos regresado a WordArt: D

rovyko

488

ingrese la descripción de la imagen aquí

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

Razvan B.
fuente

A partir de ahora, su solución es la más fácil de implementar para varios caracteres, pero aún no está al 100%.

Mathew MacLean

@MathewMacLean emisfera tiene que tener la respuesta, ¿verdad?

mttdbrd

3

Esto tiene problemas con el ajuste de texto que se exhibe incluso en el último violín. Cuando un personaje se envuelve, esencialmente se divide en dos. Sin embargo, debería ser una solución trivial.

BoltClock

16

No dependa de jquery-latest.min.js, puede hacer que sus sitios se rompan sin previo aviso si jQuery se actualiza y el complemento no funciona con el más nuevo. En su lugar: use una versión específica y verifique la compatibilidad al actualizar.

Niels Bom

2

Es posible que desee editar su respuesta para no sugerir el uso de jquery-latest.js. Como @NielsBom mencionó, en el pasado podría romper su sitio cuando se actualizó. Desde julio de 2014, no lo hará, pero eso se debe a que está bloqueado en la versión 1.11.1 y nunca se volverá a actualizar.

Código inútil

237

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>

Expandir fragmento

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

DA.
fuente

34

@MathewMacLean nuestros trabajos serían mucho más fáciles si solo IE muriera y Firefox comenzara a usar Webkit. :)

DA.

48

WebKit tiene un historial de generar errores que son casi extraños en los niveles de IE6 / IE7 (incluso se podría decir que Safari y Chrome son el IE6 de la web moderna), y se comportan de maneras que se desvían del estándar sin ninguna razón en particular. IE ha sido mucho mejor desde la versión 9, por lo que aunque las versiones antiguas ya deberían morir, no veo ninguna razón para el odio por sus versiones recientes. Y ciertamente no veo por qué las personas apoyan la idea de un monocultivo WebKit / Blink (los comentarios aquí son probablemente una broma, pero he oído hablar de personas que creen seriamente en él).

BoltClock

3

Dicho esto, background-clip: textes súper impresionante y deberían considerarlo (o algo similar text-decoration-background) para un módulo de nivel 4.

BoltClock

2

Sí, sería más feliz si blink / webkit muriera y los modernos motores de renderizado IE + FF sobrevivieran a la inversa. Lo que no quiere decir que el resto del cromo no sea agradable, solo que su renderización es prácticamente la peor del grupo hoy en día.

Eamon Nerbonne

2

Esta es una solución mucho más limpia que las bibliotecas hacky anteriores, debería ser una respuesta aceptada ya que los gradientes de texto se pueden usar hoy en día.

mystrdat

160

Ejemplo

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

wvandaal
fuente

Esto es bueno, pero el único problema es que el contenido será dinámico.

Mathew MacLean

Los resultados varían según la fuente utilizada. Además, calcular el ancho parece un problema.

j08691

@MathewMacLean hmm, ¿tu contenido solo será un personaje? Si no, ¿le gustaría que cada personaje tenga el mismo efecto de color dividido o solo ciertos (es decir, el primero)?

wvandaal

1

@MathewMacLean puede escribir una función de bucle simple en JS para lograr el ajuste. Lo estoy agregando a mi respuesta ahora.

wvandaal

1

@MathewMacLean ¿De dónde viene el texto? wvandaal tiene razón, puede ajustar el texto usted mismo.

mttdbrd

96

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!

ingrese la descripción de la imagen aquí

LukyVj
fuente

2

@Luky Vj: ¿Es esta cuenta tuya? Es posible que desee consolidar todas sus publicaciones en una sola cuenta para no encontrarse con obstáculos al intentar editar sus propias publicaciones.

BoltClock

Sí, de hecho, primero publiqué con mi primera cuenta anterior ... Y tuve que agregar una imagen, y no fui lo suficientemente popular como para publicar mi imagen ... Pero tienes razón, lo arreglaré lo antes posible !

LukyVj

1

@LukyVj: puede fusionar sus cuentas siguiendo las instrucciones aquí: stackoverflow.com/help/merging-accounts

BoltClock

1

@LukyVj Actualicé su función agregando pointer-events:nonea &:nth-child(2)- &:nth-child(5). Esto hace que el texto solo se pueda resaltar una vez y solo se obtenga una copia. Puede verlo aquí: codepen.io/anon/pen/upLaj

Mathew MacLean

74

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

ingrese la descripción de la imagen aquí

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

Ruskin
fuente

74

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.

Ejemplo de lienzo

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

Expandir fragmento

Fiambre
fuente

1

Por cierto, también puede usar 0.5para la parada de color rojo.

Cepillo de dientes

62

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>

Expandir fragmento

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

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

Prisionero
fuente

1

$('span').width()solo devuelve el ancho del primer tramo que encuentra; Tendría que ser algo que hiciste para cada par. Lo que me da una idea ...

Pointy

Esto es bastante similar al ejemplo de epascarello que se encuentra en jsfiddle.net/9WWsd. Como le dije, su ejemplo es un paso en la dirección correcta, pero sería una pesadilla usarlo a mayor escala.

Mathew MacLean

@MathewMacLean, no lo vi. ¿Por qué sería una pesadilla? ¿Qué tal esto? Jsfiddle.net/9wxfY/4

Prisionero

Cuando va a implementar más de un personaje, causa problemas.

Mathew MacLean

@MathewMacLean Ahí es donde los fabulosos Lettering.JS entra.

puntiagudo

53

Ingrese la descripción de la imagen aquí

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>

Expandir fragmento

Armador
fuente

44

Acabo de jugar con la solución @Arbel ¿Cuáles son las diferencias con la solución de Arbel? Es difícil ver si solo copió un código o lo mejoró.

AL

43

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>

Expandir fragmento

MStrutt
fuente

38

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>

Expandir fragmento

Adjit
fuente

Sin embargo, esto tiene los mismos problemas que los demás. Esto comienza a complicarse cuando intentas hacerlo con más de un personaje.

Mathew MacLean

@MathewMacLean Lo sé :( también lo vi. Trabajando en eso ahora

Adjunte

@MathewMacLean lo arregló, pero no estoy seguro de cuán limpio está ahora JQuery. Echa un vistazo

Adjit

@MathewMacLean agregando a la versión webkit de cosas que podría usar una solución como esta: jsfiddle.net/wLkVt/1

Adjunto

@MathewMacLean Solucionó el error en mi script. La razón del error fue que estaba tomando el ancho del primer elemento todo el tiempo, en lugar del ancho de las letras.

Adjunto

30

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

Sam Tremaine
fuente

27

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

Sandro Paganotti
fuente

24

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

Expandir fragmento

Alireza
fuente

23

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

Ricardo Zea
fuente

17

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>

Expandir fragmento

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

Nic Bell
fuente

16

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>

Expandir fragmento

>> Ver en jsFiddle

Geek elegante
fuente

8

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>

Expandir fragmento

GSB
fuente

5

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

mrReiha
fuente

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

Respuestas:

¡Ahora en GitHub como complemento!

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

Parte 1: solución básica

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

Parte 3: Combina y combina

-Medias horizontales

Sin sombra de texto:

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

-Vertical 1/3 piezas

Sin sombra de texto:

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

-Horizontal 1/3 piezas

Sin sombra de texto:

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

-Mejora a mitad de estilo por @KevinGranger

-PeelingStyle mejora de HalfStyle por @SamTremaine

Parte 4: Listo para producción

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

Uso

Margen

Personalización

JSFiddle DEMO

¡Pero!

De nuevo, pero!