html - que - iqos philip morris

CSS muestra un personaje en 2 colores

Question

Esta pregunta ya tiene una respuesta aquí:

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

¿Es posible en css hacer un solo personaje en 2 colores?

Me refiero, por ejemplo, al personaje "B". La primera mitad superior en ROJO y la segunda mitad en AZUL

Answer 1

Una solución sería:

HTML:

<span class="half" title="B">B</span>

(ver que tienes que establecer un valor de atributo)

CSS:

  .half {
        font-size: 90px;
        font-weight: bold;
        position: relative;
        color: blue;
        line-height: 1em;
    }

    .half:before {
        position:absolute;
        content:''''attr(title)'''';
        color: red;
        height: .5em;
        overflow: hidden;
    }

El problema es que cada navegador calcula el valor .5em de manera diferente

Answer 2

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Complete sus propios prefijos de proveedor.