javascript w3schools array - É possível aplicar CSS a metade de um caractere?





9 Answers




Acabei de terminar de desenvolver o plugin e ele está disponível para todos! Espero que você goste.

Veja o projeto no GitHub - Visualize o Website projeto. (assim você pode ver todos os estilos de divisão)

Uso

Primeiro de tudo, verifique se a biblioteca jQuery está incluída. A melhor maneira de obter a versão mais recente do jQuery é atualizar sua tag head com:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Depois de baixar os arquivos, inclua-os no seu projeto:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

Marcação

Tudo o que você precisa fazer é atribuir a classe splitchar , seguida pelo estilo desejado, ao elemento que envolve seu texto. por exemplo

<h1 class="splitchar horizontal">Splitchar</h1>

Depois de tudo isso ser feito, certifique-se de chamar a função jQuery no arquivo pronto para o documento da seguinte forma:

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

Customizing

Para fazer com que o texto fique exatamente como você deseja, tudo o que você precisa fazer é aplicar seu design da seguinte forma:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }


É isso aí! Agora você tem o plugin Splitchar todo definido. Mais informações sobre isso em Website .

objetos apostila html

O que estou procurando:

Uma maneira de estilizar um MEIO de um personagem. (Neste caso, metade da letra é transparente)

O que eu tenho procurado atualmente e tentei (sem sorte):

  • Métodos para estilizar metade de um caractere / letra
  • Estilizando parte de um personagem com CSS ou JavaScript
  • Aplicar CSS a 50% de um caractere

Abaixo está um exemplo do que estou tentando obter.

Existe uma solução CSS ou JavaScript para isso, ou terei que recorrer a imagens? Eu preferiria não seguir a rota da imagem, pois esse texto acabará sendo gerado dinamicamente.

ATUALIZAR:

Já que muitos perguntaram por que eu gostaria de escolher metade de um personagem, é por isso. Minha cidade gastou recentemente US $ 250.000 para definir uma nova "marca" para si mesma. Este logo é o que eles inventaram. Muitas pessoas reclamaram da simplicidade e da falta de criatividade e continuam a fazê-lo. Meu objetivo era criar este website como uma brincadeira. Digite 'Halifax' e você verá o que quero dizer. :)




JSFiddle DEMO

Vamos fazer isso usando apenas pseudo seletores CSS!

Essa técnica funcionará com conteúdo gerado dinamicamente e tamanhos e larguras de fonte diferentes.

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 a string gerada dinamicamente, você poderia usar uma função 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);
}



Aqui uma implementação feia na tela. Eu tentei esta solução, mas os resultados são piores do que eu esperava, então aqui está mesmo assim.

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




O mais próximo que eu posso 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>

Demonstração: http://jsfiddle.net/9wxfY/2/

Heres uma versão que usa apenas um span: http://jsfiddle.net/9wxfY/4/




Outra solução somente CSS (embora o atributo data seja necessário se você não quiser escrever CSS específico para letra). Este funciona mais em toda a linha (Tested IE 9/10, Chrome latest & FF latest)

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

Você pode colocar este código em todos os tipos de coisas interessantes - esta é apenas uma implementação que eu e meu colega criamos na noite passada.




FWIW, aqui está a minha opinião sobre isso, só com CSS: http://codepen.io/ricardozea/pen/uFbts/

Várias notas:

  • A principal razão que fiz isso foi testar a mim mesmo e ver se eu era capaz de realizar o styling de metade de um personagem, enquanto na verdade fornecia uma resposta significativa para o OP.

  • Estou ciente de que esta não é uma solução ideal ou a mais escalável e as soluções propostas pelas pessoas aqui são muito melhores para os cenários do "mundo real".

  • O código CSS que criei baseia-se nos primeiros pensamentos que me vieram à mente e na minha abordagem pessoal do problema.

  • Minha solução só funciona em caracteres simétricos, como X, A, O, M. ** Não funciona em caracteres assimétricos como B, C, F, K ou letras minúsculas.

  • ** NO ENTANTO, esta abordagem cria 'formas' muito interessantes com caracteres assimétricos. Tente mudar o X para um K ou para uma letra minúscula como um h ou um p no 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);
  }
}



Você também pode fazer isso usando SVG, se desejar:

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




Você pode usar o código abaixo. Aqui neste exemplo eu usei h1tag e adicionei um atributo data-title-text="Display Text"que aparecerá com texto de cor diferente no h1elemento de texto de tag, que dá efeito de texto com meia cor, como mostrado no exemplo abaixo

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