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

¿Cómo dividir el background en 50% con css3 en un texto 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>

 

¿Quieres descargar el código fuente Diseñar el background en 50% de un H1?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 1550 veces | Publicado hace 9 meses

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

DESCARGAR ARCHIVOS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021