Tabla de contenido
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
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.