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


Answers




¡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 Website 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:

<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 tienes que hacer es asignar el splitchar de clase, seguido del estilo deseado al elemento que envuelve tu 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 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 - e.g 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 Website .

Question

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.

¿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 objetivo era crear este website como una broma. Escribe 'Halifax' y verás a qué me refiero. :)




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

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div>

$(function(){
    $("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);
        });
    });
});



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




.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

You can crowbar this code into doing all sorts of interesting things - this is just one implementation my associate and I came up with last night.




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

Several notes:

  • 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

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



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);
}
<span data-char="X">X</span>




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%;
  
}
<div class="halfed"> X </div>

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

>> See on jsFiddle




Puedes usar el código a continuación. Aquí, en este ejemplo, he usado una h1etiqueta y he añadido un atributo data-title-text="Display Text"que aparecerá con texto de color diferente en el h1elemento de texto de etiqueta, que da un efecto de medio tono de texto como se muestra en el ejemplo siguiente.

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>




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:

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



Links