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

Lo que estoy buscando:

Una forma de dar estilo a la mitad de un personaje. (En este caso, la mitad de la carta es transparente)

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

  • Métodos para diseñar la mitad de un personaje / letra
  • Estilo de 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.

X

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


ACTUALIZAR:

Como muchos me han preguntado por qué querría darle estilo a la mitad de un personaje, esta es la razón. Mi ciudad recientemente gastó $ 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 la falta de creatividad y continúan haciéndolo. Mi objective era crear este sitio web como una broma. Escribe ‘Halifax’ y verás a qué me refiero. 🙂

¡Ahora en GitHub como un complemento!

enter image description here Siéntete libre de bifurcarte y mejorar.

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


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

Parte 1: Solución Básica

Medio estilo en el texto

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


Esto funciona en cualquier texto dynamic, 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 rest se soluciona.

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:

Pure CSS. Todo lo que necesita hacer es aplicar la clase .halfStyle a cada elemento que contenga el carácter que quiere 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 pseudo elemento usar content: attr(data-content); por lo que .halfStyle:before class será dynamic y no será necesario codificarlo para cada instancia.

Explicación para 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('' + text + ''); // 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 += ''; } // 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; } 
  

Single Characters:

X Y Z A

Automated:

Half-style, please.

enter image description here

¡Acabo de terminar de desarrollar el complemento y está disponible para que todos lo utilicen! 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 tener incluida la biblioteca jQuery . La mejor manera de obtener la última versión de jQuery es actualizar su etiqueta principal con:

  

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

   

Margen

Todo lo que tienes que hacer es asignar el splitchar de clase, seguido del estilo deseado al elemento que envuelve tu texto. p.ej

 

Splitchar

Después de hacer todo esto, solo asegúrese de llamar a la función jQuery en su archivo listo para documentos de esta manera:

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

Personalizando

Para hacer 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 - eg font-size */ } .horizontal:before { /* CSS for the left half */ } .horizontal:after { /* CSS for the right half */ } 

¡Eso es! Ahora tiene todo el plugin de Splitchar . Más información al respecto en http://razvanbalosin.com/Splitchar.js/ .

Edición (oct 2017): cada navegador principal admite las background-image options background-clip o mejor background-image options : CanIUse

Sí, puedes hacer esto con solo un personaje y solo CSS.

Webkit (y Chrome) solamente, sin embargo:

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

X

Ejemplo


DEMO de JSFiddle

¡Lo haremos usando pseudo selectores de CSS!

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

HTML:

 
Two is better than one.

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, 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” + “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. Así que la idea es la misma, la realización puede ser horrible, pero funciona.

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

enter image description here

Aquí una fea implementación en el canvas. Probé 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 = $("") .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); }); }); 
  
Example Text

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

enter image description here

Creado con 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 CSS Tricks de Chris Coyer y en la página Codepen de Lucas Bebber

Lo más cerca que puedo estar:

 $(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; } 
  XX 

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('' + v + ''); }); 
 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; } 
  Dr. Jekyll and M. Hide 

Otra solución exclusiva de CSS (aunque se necesita un atributo de datos si no desea escribir un CSS específico para una carta). Este funciona más en todos los ámbitos (probado IE 9/10, último Chrome y último FF)

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

Solución limitada de CSS y jQuery

No estoy seguro de qué tan elegante es esta solución, pero corta todo 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:

Echa 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 necesitas 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 = " "; dupText = "" + chars + ""; 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; } 
  
This is a sentence
 .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/

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

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

FWIW, here’s my take on this doing it only with CSS: http://codepen.io/ricardozea/pen/uFbts/

Varias notas:

  • The main reason I did this was to test myself and see if I was able to accomplish styling half of a character while actually providing a meaningful answer to the OP.

  • I am aware that this is not an ideal or the most scalable solution and the solutions proposed by the people here are far better for “real world” scenarios.

  • The CSS code I created is based on the first thoughts that came to my mind and my own personal approach to the problem.

  • My solution only works on symmetrical characters, like X, A, O, M. **It does not work on asymmetric characters like B, C, F, K or lower case letters.

  • ** HOWEVER, this approach creates very interesting ‘shapes’ with asymmetric characters. Try changing the X to a K or to a lower case letter like an h or a p in the CSS 🙂

HTML

  

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

You can also do it using SVG, if you wish:

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

This is not a solution X

This can be achieved with just CSS :before selector and 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%; } 
 
X
X

How about something like this for shorter text?

It could even work for longer text if you did something with a loop, repeating the characters with JavaScript. Anyway, the result is something like this:

Is it possible to apply CSS to half of a character?

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

S

t

a

c

k

o

v

e

r

f

l

o

w

You can use below code. Here in this example I have used h1 tag and added an attribute data-title-text="Display Text" which will appear with different color text on h1 tag text element, which gives effect halfcolored text as shown in below example

enter image description here

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

Display Text