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





9 Answers




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

change class add

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




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



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>




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/




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>




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




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



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




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>




Related