Inicio Apuntes FPApuntes DAM Efecto error sobre el texto, cómo crearlo con CSS de forma rápida

Efecto error sobre el texto, cómo crearlo con CSS de forma rápida

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo para dar respuesta a una pregunta que un usuario me hizo este pasado fin de semana. El caso es que este usuario quiere darle al mensaje de error 404 que aparece en su página, un efecto error sobre el texto, para que este se muestre de forma incorrecta, pero totalmente legible.

Para crear este efecto de error sobre el texto, tan solo será necesario utilizar algunas reglas CSS, con las que conseguiremos el efecto buscado. El ejemplo que vamos a ver a continuación, es suficientemente sencillo como para poder aplicarlo sobre cualquier texto que queramos que muestre este efecto.

Código del efecto error sobre el texto

Efecto error sobre el texto
Esto es solo un frame

Este ejemplo se va a poder generar de forma sencilla, por lo que tan solo necesitaremos de un marco sobre el que aplicar el efecto. Crearemos el marco en un archivo llamado index.html, y dentro de este archivo, no tendremos más que escribir el código que vamos a ver a continuación. Después en el archivo style.css, añadiremos las reglas necesarias para generar el efecto error sobre el texto.

Archivo index.html

Como decía, dentro de este archivo crearemos el marco sobre el cual aplicar el efecto. Para ello, dentro del archivo index.html vamos a pegar el siguiente código:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Efecto error en texto</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="contenido">
      <img src="img/entreunosycerosTransparente.png" class="imagenError"/><br/>
      <h2 class="text" data-text="error 404">ERROR 404</h2>
    </div>
</body>

</html>

Archivo style.css

Para crear el efecto, el cual crearemos gracias a los @keyframes, dentro del archivo style.css solo necesitaremos pegar el siguiente contenido:

* {
    margin: 0;
    padding: 0;
    font-family: 'Arial', Comic Sans MS, monospace;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

/*Marco contenido*/

.contenido {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Imagen */

.contenido .imagenError {
    top: 8em;
    position: absolute;
    width: 125px;
    height: 125px;

}
/* Texto */
.contenido .text {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 45px;
    transform: scale(2);
    padding: 30px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contenido .text:before,
.contenido .text:after {
    padding: 30px;
    color: rgb(241, 255, 111);
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
    top: 0;
}

/* Efecto sobre el texto*/

.contenido .text:before {
    left: 3px;
    text-shadow: -2px 0 red;
    animation: fallo-1 1s linear infinite reverse;
}

.contenido .text:after {
    left: 3px;
    text-shadow: -2px 0 blue;
    animation: fallo-2 1s linear infinite reverse;
}


@keyframes fallo-1 {
    0% {
        clip: rect(132px, auto, 101px, 30px);
    }

    5% {
        clip: rect(17px, auto, 94px, 30px);
    }

    10% {
        clip: rect(40px, auto, 66px, 30px);
    }

    15% {
        clip: rect(87px, auto, 82px, 30px);
    }

    20% {
        clip: rect(137px, auto, 61px, 30px);
    }

    25% {
        clip: rect(34px, auto, 14px, 30px);
    }

    30% {
        clip: rect(133px, auto, 74px, 30px);
    }

    35% {
        clip: rect(76px, auto, 107px, 30px);
    }

    40% {
        clip: rect(59px, auto, 130px, 30px);
    }

    45% {
        clip: rect(29px, auto, 84px, 30px);
    }

    50% {
        clip: rect(22px, auto, 67px, 30px);
    }

    55% {
        clip: rect(67px, auto, 62px, 30px);
    }

    60% {
        clip: rect(10px, auto, 105px, 30px);
    }

    65% {
        clip: rect(78px, auto, 115px, 30px);
    }

    70% {
        clip: rect(105px, auto, 13px, 30px);
    }

    75% {
        clip: rect(15px, auto, 75px, 30px);
    }

    80% {
        clip: rect(66px, auto, 39px, 30px);
    }

    85% {
        clip: rect(133px, auto, 73px, 30px);
    }

    90% {
        clip: rect(36px, auto, 128px, 30px);
    }

    95% {
        clip: rect(68px, auto, 103px, 30px);
    }

    100% {
        clip: rect(14px, auto, 100px, 30px);
    }
}

@keyframes fallo-2 {
    0% {
        clip: rect(129px, auto, 36px, 30px);
    }

    5% {
        clip: rect(36px, auto, 4px, 30px);
    }

    10% {
        clip: rect(85px, auto, 66px, 30px);
    }

    15% {
        clip: rect(91px, auto, 91px, 30px);
    }

    20% {
        clip: rect(148px, auto, 138px, 30px);
    }

    25% {
        clip: rect(38px, auto, 122px, 30px);
    }

    30% {
        clip: rect(69px, auto, 54px, 30px);
    }

    35% {
        clip: rect(98px, auto, 71px, 30px);
    }

    40% {
        clip: rect(146px, auto, 34px, 30px);
    }

    45% {
        clip: rect(134px, auto, 43px, 30px);
    }

    50% {
        clip: rect(102px, auto, 80px, 30px);
    }

    55% {
        clip: rect(119px, auto, 44px, 30px);
    }

    60% {
        clip: rect(106px, auto, 99px, 30px);
    }

    65% {
        clip: rect(141px, auto, 74px, 30px);
    }

    70% {
        clip: rect(20px, auto, 78px, 30px);
    }

    75% {
        clip: rect(133px, auto, 79px, 30px);
    }

    80% {
        clip: rect(78px, auto, 52px, 30px);
    }

    85% {
        clip: rect(35px, auto, 39px, 30px);
    }

    90% {
        clip: rect(67px, auto, 70px, 30px);
    }

    95% {
        clip: rect(71px, auto, 103px, 30px);
    }

    100% {
        clip: rect(83px, auto, 40px, 30px);
    }
}

Tras pegar estos códigos, dentro de sus respectivos archivos, solo nos queda guardarlos. Tras ello, si ejecutamos el archivo index.html, veremos el ejemplo en funcionamiento. Si quieres verlo antes de utilizar estos códigos, puedes hacerlo en la sección de ejemplos de esta web.

Con esto, creo que el usuario podrá añadir este efecto de error a su página web de forma bastante sencilla. Tan solo tendrá que trasladar este ejemplo a su sitio.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.