Diseñar el background en 50% de un H1

¿Cómo dividir el background en 50% con css3 en un texto H1?

Diseñar el background en 50% de un H1

Diseñar un título h1 con un background css3 en blanco y negro a la mitad en un 50%, diseño de background en 50% negro y blanco con texto centrado con css

Hola!!... diseñador web!

Efecto de texto (h1) con color traspuesto con respecto al fondo.

En ocaciones necesitamos realizar diseños CSS nuevos para innovar la parte visual de una página web, pues bien aqui voy a mostrarte como podemos hacer el siguiente diseño o efecto CSS que puedes entenderlo y usarlo en tus proyecto web FrontEnd: por favor sigue el link  Ver demostración del efecto css

¿Cómo vamos a diseñar el efecto CSS de texto de color traspuesto?

Sigue los siguientes pasos:

  1. Background dividido en dos colores blanco y negro a la mitad o el 50% de fondo 
  2. Colocar un texto encabezado en h1 (puede ser p, h1...h2, etc) en el medio de la pantalla o al menos centrado horizontalmente.
  3. Lograr el efecto de negativo o traspuesto en el texto con respecto al fondo o background.

Diseñar un título h1 con un background css3 en blanco y negro a la mitad en un 50%, 

Código fuente en HTML y CSS

    <h1>CODEA</h1>
    <style>
        body{
            margin: 0;
            width: 100%;
            height: 100vh;
            background: linear-gradient(to right, white 0%, white 50%, black 50%, black 100%);
        }
        h1{
            background: linear-gradient(to right, black 0%, black 50%, white 50%, white 100% );
            color: white;
            text-align: center;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 150px;
        }
    </style>

 

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 1145

Redactado por: , Leido 6746 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021