3

Estou tentando mudar a cor do texto de acordo com o plano de fundo em css, tenho uma lista, cada linha é uma cor, preciso que para planos de fundos claros o texto seja preto e para planos de fundos escuros o texto seja claro.

Exemplo:

tr td {
  color: white;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

Estou usando invert porém ele acaba invertendo tonalidades que não precisa.

E +- http://aerolab.github.io/midnight.js/ só que sem estes efeitos.

4
  • Então você não quer inverter as cores? 25/04/2016 às 15:10
  • "cada linha é uma cor, preciso que quando passe o mouse sobre ela,ela seja claramente lida" isso não fica muito aberto a opinião?
    – DH.
    25/04/2016 às 15:15
  • Se estivesse aplicando a regra aos elementos, sendo mais genérico, seria um problema. Mas como você tem classes, por que não as usa? .tr1 td:hover { filter: none } não resolveria? 25/04/2016 às 15:25
  • Se precisa controlar as cores, a solução provavelmente é explicitar as cores em vez de usar o invert. Ponha a cor de frente e de fundo desejada no hover e está feito. Além de tudo, é uma solução cross-broswer que funciona desde muitas versões atrás dos navegadores.
    – Largato
    25/04/2016 às 15:45

5 Respostas 5

7

Usando mix-blend-mode:

A aceitação deste parâmetro não é das maiores, mas por ora creio ser a única alternativa razoável com CSS puro:

.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}

td {
  color:#fff;
  mix-blend-mode: exclusion;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

Notar que neste caso, como depende de duas camadas, estou aplicando a propriedade nos <td> e não nos <tr>.


Alternativa com borda apenas:

Estou postando apenas para termos uma saída diferente da cor automática de fundo. A idéia aqui é destacar o escrito com um "contorno", simulado com text-shadow:

.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}

.tr1,.tr2,.tr3,.tr4 {
  color:#000;
  text-shadow: 0 -1px 2px #fff,0 1px 2px #fff,-1px 0 2px #fff,1px 0 2px #fff;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

7
  • Mas você entendeu o que eu to querendo ? eu estou quase usando javascript para varrer todas as tonalidades claras de plano de fundo e setar o texto como preto e os planos de fundo escuros com o texto branco... mas queria ver se da pra fazer com css apenas 25/04/2016 às 17:29
  • Entender eu entendi, depois que você editou a pergunta ficou melhor. Só quis postar uma alternativa que pudesse ser resolvida com CSS, pois provavelmente só com JS mesmo pra resolver automaticamente. Pra falar a verdade, eu acho que compensava você explicitar a cor diretamente, sem complicar. Em vez de por só o background-color, podia por o color também, em todas que forem diferentes. Se estiver gerando a página com alguma coisa server-side, fica melhor que com JS, pois aí não depende mais do JS executado no lado do cliente.
    – Largato
    25/04/2016 às 17:30
  • Atualizei com uma alternativa CSS
    – Largato
    25/04/2016 às 18:04
  • Pois eh, estava testando esse mix-blend-mode agora, o ruim é que ele acaba deixando a cor de texto de outras cores, gostaria de preto e branco apenas. 25/04/2016 às 18:13
  • Acabei fazendo isso: jsfiddle.net/gabrielr47/Lb7dvdr5 25/04/2016 às 18:39
3

O que pretende é implementar invert exceto a class tr1.

Altere o css de.:

tr td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}

para.:

tr:not(.tr1) td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}

Fica assim.:

tr:not(.tr1) td:hover {
  -webkit-filter: invert(1);
  filter: invert(1);
}
.tr1 {
  background-color: white;
}
.tr2 {
  background-color: black;
}
.tr3 {
  background-color: red;
}
.tr4 {
  background-color: blue;
}
<table>
  <tr class="tr1">
    <td>Item 1</td>
  </tr>
  <tr class="tr2">
    <td>Item 2</td>
  </tr>
  <tr class="tr3">
    <td>Item 3</td>
  </tr>
  <tr class="tr4">
    <td>Item 4</td>
  </tr>
</table>

2

Como não consegui encontrar esta solução em css e estou utilizando jQuery no meu projeto criei um plugin para varrer todos os backgrounds das tr's e muda-los conforme a sua tonalidade.

Exemplo:

// Alimentando a Tabela para testes

var cores = ['#FFFFFF', '#FF0000', '#33ff33', '#0000FF', '#FF00FF', '#00FFFF', '#000000', '#FFFF00', '#FFFFFF', '#FFCCCC', '#FFCC99', '#FFFFCC', '#CCCCCC', '#C0C0C0', '#999999', '#666666', '#333333',
  '#000000', '#99FF99', '#66FF99', '#33ff33', '#00CC00', '#009900', '#006600', '#003300', '#FF6666', '#FF0000', '#CC0000', '#990000', '#660000', '#330000', '#CCFFFF', '#66FFFF', '#33CCFF',
  '#3366FF', '#3333FF', '#000099', '#000066', '#FFCC33', '#FF9900', '#FF6600', '#CC6600', '#993300', '#663300', '#FFCCFF', '#FF99FF', '#CC66CC', '#CC33CC', '#993366', '#663366', '#330033',
  '#FFFF99', '#70DB93', '#238E23', '#93DB70', '#00FF7F', '#2F4F2F', '#4A766E', '#4F4F2F', '#32CD32', '#527F76', '#215E21', '#9F9F5F', '#32CD99', '#6B8E23', '#426F42', '#7FFF00', '#8FBC8F',
  '#238E68', '#99CC32', '#5C3317', '#A62A2A', '#5C4033', '#97694F', '#855E42', '#D19275', '#8E2323', '#E9C2A6', '#A68064', '#EBC79E', '#6B4226', '#8E6B23', '#DB9370', '#5C4033', '#9F5F9F',
  '#9932CD', '#871F78', '#856363', '#4E2F2F', '#8E236B', '#4F2F4F', '#9370DB', '#DB7093', '#FF6EC7', '#DB70DB', '#BC8F8F', '#EAADEA', '#FF1CAE', '#CC3299', '#6F4242', '#B5A642', '#D9D919',
  '#8C7853', '#A67D3D', '#D98719', '#B87333', '#FF7F00', '#CD7F32', '#DBDB70', '#E47833', '#EAEAAE', '#CFB53B', '#FF7F00', '#FF2400', '#8C1717', '#D8D8BF', '#5F9F9F', '#42426F', '#6B238E',
  '#7093DB', '#C0D9D9', '#8F8FBD', '#3232CD', '#7F00FF', '#70DBDB', '#2F2F4F', '#23238E', '#4D4DFF', '#00009C', '#5959AB', '#3299CC', '#007FFF', '#236B8E', '#38B0DE', '#D8BFD8', '#ADEAEA',
  '#2F4F4F', '#545454', '#C0C0C0', '#A8A8A8', '#D9D9F3', '#E6E8FA', '#CDCDCD'
];
var table = '';
for (i = 0; i < cores.length; i++) {
  table += "<tr style='background-color:" + cores[i] + ";'><td> " + cores[i] + " </td></tr>";
}

table += "<tr><td>#FFFFFF  </td></tr>";

$("#table").append(table);


// Plugin jQuery - Muda a Cor do texto baseado na cor de fundo.

$.fn.textColorSwitch = function() {
  this.init = function() {
    $.each(this.find('tr'), function(key, val) {
      var colors = $(val).css('backgroundColor').match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
      if (colors !== null) {
        var cor = 'white';

        var maxColor = (
          Math.floor((colors[1]) * 1) +
          Math.floor((colors[2]) * 1) +
          Math.floor((colors[3]) * 1)
        );

        if (maxColor > 382) {
          cor = 'black';
        }
        $(this).css('color', cor);
      }
    });
  };
  this.init();
  return this;
};

// Chamando o Plugin

$("table").textColorSwitch();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<table id="table"></table>

2
  • Só uma observação: se na situação real já for gerar a tabela por JS, não tem sentido colorir depois. Seria muito mais simples já colorir a frente e o fundo no próprio loop de geração. Sua solução é boa se for aplicada numa tabela que já tem cores originalmente. Notar que os fatores * 1 na verdade teriam que ser diferentes dependendo do canal de cor ( R, G e B tem uma luminosidade diferente aos nossos olhos)
    – Largato
    25/04/2016 às 20:21
  • 1
    @Bacco no meu caso as tabelas já estarão geradas por uma biblioteca que eu não quero estender ou alterar, para marcar como aceita tenho que esperar 2 dias, talvez apareça alguma resposta melhor neste meio tempo 25/04/2016 às 20:49
1

Acredito que o que esteja procurando seja leitura clara do texto. Vamos lá.

Podemos fazer isso utilizando simples e , ainda podemos adicionar alguns efeitos básicos de fade que podem ser retirados deletando a primeira seleção do css caso não queira usar.

O código é simples, vamos começar mantendo seu html

<table>
   <tr class="tr1">
      <td>Item 1</td>
   </tr>
   <tr class="tr2">
      <td>Item 2</td>
   </tr>
   <tr class="tr3">
      <td>Item 3</td>
   </tr>
   <tr class="tr4">
      <td>Item 4</td>
   </tr>
</table>

E agora para fazer o que queremos que é facilitar a leitura, vamos aplicar um efeito fade que vai "destacar" o texto.

CSS

 tr td {
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
     overflow: hidden;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
}

tr td:hover, tr td:focus, tr td:active {
    background-color: #2098d1;
    color: white;
}

A edição pra adaptar pro seu uso é bem simples também, apenas mudando cores e afins.

O resultado pode ser visto aqui: https://jsfiddle.net/a3sL15j9/4/

-4

HTML

<div class="campo">
    <span class="texto">Texto</span>
</div>
<style>
.campo {
        width: 100px;
        height: 100px;
        background-color: silver;
        color: silver;
    }
.campo .texto{
        font-weight: 600;
        font-family: 'Courier New', Courier, monospace;
        filter: invert(100%) saturate(0%) grayscale(100%);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .