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

Diseñar un menu responsive

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

VER DEMO

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:

Background dividido en dos colores blanco y negro a la mitad o el 50% de fondo
Colocar un texto encabezado en h1 (puede ser p, h1...h2, etc) en el medio de la pantalla o al menos centrado horizontalmente.
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>

Background 50% black and white CSS

Otro Ejemplo con efecto cristal o tambien llamado EFECTO GLASSMORPHISM EN CSS

tendencia es un fondo semitransparente, con una sombra y borde sublimes. Pero también se añade un difuminado al fondo para que lo que queda detrás del fondo se “transforme” elegantemente dentro del mismo elemento

Background 50% black and white CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background 50% black and white </title>
    <style>
        :root{
            --color-a: rgb(255, 255, 255);
            --color-b: rgb(0, 0, 0);
        }
        body{
            margin: 0;
            background: linear-gradient(to right,var(--color-a) 50%, var(--color-b) 50%);            
            height: 100vh;
            width: 100%;
        }
        h1{
            background: linear-gradient(to right, var(--color-b) 50%, var(--color-a) 50%);                        
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 0.01px rgb(129, 129, 129);
            text-align: center;
            font-size: 75px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }
        .parent{            
            display: grid;
            place-items: center;
            height: 100vh;            
        }
        .child{ 
            background: rgba(255, 255, 255, .2);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);            
            border: 1.5px solid rgba(209, 213, 219, 0.3);            
            border-radius: 10px;            
            padding: 20px;
        }
    </style>
</head>
<body>
        <div class="parent">            
            <div class="child">
                <h1>WELCOME</h1>
            </div>
        </div>
</body>
</html>

Descarga código fuente 1433

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 11591 veces

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Más tutoriales de programación CSS

1 ¿Qué es una hojas de estilos CSS? 2 Vincular un hoja de estilos CSS 3 Centrar un div con CSS 4 Aplicar CSS en una página web 5 CSS en el Head 6 Aplicar efectos animados con transition 7 Poner imagen en un div responsive 8 Posicionar elementos o divs con CSS 9 Estilo hoja de notas con CSS puro 10 Diseñar iconos burger y doots 11 Agregar efecto degradado a texto 12 Aprende a usar Animate.css rápido y fácil 13 Diseñar ventana modal responsive 14 Ajustar texto a una imagen shape-outside 15 Diseñar un menu responsive 16 Diseñar el background en 50% de un H1 17 Hola Mundo con CSS 18 Timeline en CSS sencillo 19 Diseño de Card con CSS 20 Animar elementos con CSS 21 Texto Circular con CSS y JS 22 Card 3d flip básico con perspective 23 Menú CSS con animación circular 3D 24 Diseño de una Layout Responsive 25 Dividir layout a la mitad con CSS 26 Crear un botón con Html Css 27 Diseño de un Card Animado con CSS 28 Menú Hamburguesa Animado con CSS 29 Optimizar CSS en una página web

Diseñar el background en 50% de un H1

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

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

Background 50% black and white CSS

Talvez tiene el código fuente para descargar

Más tutoriales de programación CSS

Core

Enlaces