Ejemplos creativos de error 404 con CSS

Las páginas de error 404 es una de las tareas de diseño web más olvidadas: su maquetación siempre queda relegada al último lugar y con una prioridad muy baja, resultando en un diseño poco creativo y estándar. Sin embargo tenemos que visualizar los errores 404 como una oportunidad para ayudar y guiar al usuario hacia el contenido o sección que está buscando, ofreciéndole una buena experiencia de usuario.

Un formulario de búsqueda y un resumen de las secciones de nuestro sitio web es siempre un buen punto de partida como contenido en una página de error 404. Pero lo primero que va a encontrar el usuario es precisamente eso, un aviso de que algo ha fallado o que el contenido que busca ya no está allí. ¿Por qué no avisarle de una forma creativo y divertida?

Eso es lo que nos hemos propuesto en este artículo, diseñar varios ejemplos de página 404 con animaciones CSS. Ya habíamos visto algunos ejemplos en Silo, pero tras las demos del menú hamburguesa y el showcase del formulario de newsletter queríamos aportar nuestro granito de arena, así que esperamos que os gusten!

Error 404 con animaciones CSS en texto

Error 4040 animación CSS
Aplicando algunas animaciones CSS para imitar el vuelco y caída de texto

Para este ejemplo hemos usado dos animaciones, una para cada número 4. En la primera, queremos imitar que el número se cae y queda colgando de un eje invisible. El 4 final vuelca a la derecha, en dos fases. Este es el resultado final:

El HTML necesario es muy simple, un contenedor para poder centrar los elementos y cada número dentro de un elemento span para poder darle estilo y asignarle las animaciones. En este caso hemos necesitado un elemento span padre y otro hijo para asignarle correctamente las transformaciones. También puedes optar por englobar los números en un elemento h1 para que sea más semántico:

<section class="error-container">
	<span><span>4</span></span>
	<span>0</span>
	<span><span>4</span></span>
</section>

En cuanto al CSS, por un lado están definidos los estilos de cada número:

.error-container {
	text-align: center;
	font-size: 180px;
	font-family: 'Catamaran', sans-serif;
	font-weight: 800;
	margin: 20px 15px;
}
.error-container > span {
	display: inline-block;
	line-height: 0.7;
	position: relative;
	color: #FFB485;
}
.error-container > span > span {
	display: inline-block;
	position: relative;
}
.error-container > span:nth-of-type(1) {
	perspective: 1000px;
	perspective-origin: 500% 50%;
	color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
	transform-origin: 50% 100% 0px;
	transform: rotateX(0);
	animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
	perspective: none;
	perspective-origin: 50% 50%;
	color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
	transform-origin: 100% 100% 0px;
	transform: rotate(0deg);
	animation: rotatedrop 8s infinite;
}

y mas adelante las dos animaciones mediante @keyframes tanto para el primer 4 como para el último:

@keyframes easyoutelastic {
	0% {
		transform: rotateX(0);
	}
	9% {
		transform: rotateX(210deg);
	}
	13% {
		transform: rotateX(150deg);
	}
	16% {
		transform: rotateX(200deg);
	}
	18% {
		transform: rotateX(170deg);
	}
	20% {
		transform: rotateX(180deg);
	}
	60% {
		transform: rotateX(180deg);
	}
	80% {
		transform: rotateX(0);
	}
	100% {
		transform: rotateX(0);
	}
}

@keyframes rotatedrop {
	0% {
		transform: rotate(0);
	}
	10% {
		transform: rotate(30deg);
	}
	15% {
		transform: rotate(90deg);
	}
	70% {
		transform: rotate(90deg);
	}
	80% {
		transform: rotate(0);
	}
	100% {
		transform: rotateX(0);
	}
}

Si prefieres usar JS para animar texto puedes optar por estos otros ejemplos, alguno de los cuales nos han servido de inspiración para esta demo concreta.

Animando un diseño gráfico de error 404

Diseño web de 404 con CSS
Transformando un diseño gráfico de página de error 404 en diseño web con CSS

Nos encantan las ilustraciones y diseños de Yoga Perdana y hacer que uno de sus trabajos cobre vida gracias al CSS ha sido todo un reto. Lo más complejo de esta demo son sin duda las sombras, pues en diseño flat las long shadows son complejas de realizar usando solo la propiedad box-shadow de CSS.

Cómo el diseño original no tiene ninguna animación, hemos decidido darle vida jugando con las sombras internas del elemento 0. El HTML muy similar al anterior, la única diferencia es que los números no se van a ver, son gráficos, por lo que hay que incluirlos y desplazarlos para que no sean legibles para el usuario pero si para los dispositivos:

<section class="error-container">
	<span class="four"><span class="screen-reader-text">4</span></span>
	<span class="zero"><span class="screen-reader-text">0</span></span>
	<span class="four"><span class="screen-reader-text">4</span></span>
</section>

En cuanto al CSS, muchos backgrounds CSS múltiples, como ya vimos en el ejemplo del banner responsive, usando además sombras simuladas por encima de los fondos y gradientes CSS reales. Todo muy divertido!

.error-container > span.four {
	width: 136px;
	height: 43px;
	border-radius: 999px;
	background:
		linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
		linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),
		linear-gradient(to right, #d89ca4, #e27b7e);
}
.error-container > span.four:before,
.error-container > span.four:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 999px;
}
.error-container > span.four:before {
	width: 43px;
	height: 156px;
	left: 60px;
	bottom: -43px;
	background:
		linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),
		linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
		linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}
.error-container > span.four:after {
	width: 137px;
	height: 43px;
	transform: rotate(-49.5deg);
	left: -18px;
	bottom: 36px;
	background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}

.error-container > span.zero {
	vertical-align: text-top;
	width: 156px;
	height: 156px;
	border-radius: 999px;
	background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%,  transparent 51%, transparent 100%),
		linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
	overflow: hidden;
	animation: bgshadow 5s infinite;
}
.error-container > span.zero:before {
	content: '';
	display: block;
	position: absolute;
	transform: rotate(45deg);
	width: 90px;
	height: 90px;
	background-color: transparent;
	left: 0px;
	bottom: 0px;
	background:
		linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%),
		linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
}
.error-container > span.zero:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 999px;
	width: 70px;
	height: 70px;
	left: 43px;
	bottom: 43px;
	background: #FDFAF5;
	box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

Finalmente, para la animación, un efecto jugando con las sombras donde parece que el disco de fondo del número 0 se desplaza por detrás de la página…pero no, son solo sombras y tu ojo que te juega una mala pasada 😀

@keyframes bgshadow {
	0% {
		box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
	}
	45% {
		box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
	}
	55% {
		box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
	}
	100% {
		box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
	}
}

Error 404 con paleta de colores

Diseño página error 404 con colores
Ejemplo de cómo usar la paleta de colores de tu web en la página de error 404

Si tienes una paleta de colores bien decidida en tu web no sería mala idea darle uso en tu página de error 404 para diseñar algo creativo con ellos. En este caso te proponemos usar el 0 como ruleta de colores que vaya modificando el color de los números 4 en una animación circular:

El HTML continua siendo lo más minimalista posible:

<section class="error-container">
	<span>4</span>
	<span><span class="screen-reader-text">0</span></span>
	<span>4</span>
</section>

Mientra que en el CSS necesitamos definir los pseudoelementos ::after y ::before del 0 para crear esta ruleta de sombras con la propiedad box-shadow, así como su animación:

.error-container > span:nth-of-type(1) {
	color: #D1F2A5;
	animation: colordancing 4s infinite;
}
.error-container > span:nth-of-type(3) {
	color: #F56991;
	animation: colordancing2 4s infinite;
}
.error-container > span:nth-of-type(2) {
	width: 120px;
	height: 120px;
	border-radius: 999px;
}
.error-container > span:nth-of-type(2):before,
.error-container > span:nth-of-type(2):after {
	border-radius: 0%;
	content:"";
	position: absolute;
	top: 0; left: 0;
	width: inherit; height: inherit;
	border-radius: 999px;
	box-shadow: inset 30px 0 0 rgba(209, 242, 165, 0.4),
		inset 0 30px 0 rgba(239, 250, 180, 0.4),
		inset -30px 0 0 rgba(255, 196, 140, 0.4),	
		inset 0 -30px 0 rgba(245, 105, 145, 0.4);
	animation: shadowsdancing 4s infinite;
}
.error-container > span:nth-of-type(2):before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

Y finalmente una sencilla animación para cambiar el color de texto de los 4:

@keyframes colordancing {
	0% {
		color: #D1F2A5;
	}
	25% {
		color: #F56991;
	}
	50% {
		color: #FFC48C;
	}
	75% {
		color: #EFFAB4;
	}
	100% {
		color: #D1F2A5;
	}
}

La importancia de las páginas singulares en el diseño web

Cuando diseñamos una web debemos seguir una estructura, unos contenidos, una guía de estilos…en definitiva un programa que muchas veces hacen muy difícil poder introducir nuevos elementos o experimentar con nuevas propiedades y valores.

Son en páginas singulares, como esta de error 404, donde los diseñadores tenemos margen de creación y donde además el usuario final va a poder percibir otro feeling en su interacción con la aplicación o web. En un proyecto donde el estilo global está muy definido, podemos desarrollar algo diferente y usar las nuevas tendencias con un riesgo mínimo a equivocarnos.

Por ello, ya sea mediante el uso de animaciones CSS como hemos visto en el ejemplo o usando algún elemento singulares (una illustación, un svg…), hagamos de estas páginas algo especial. Convirtamos esa singularidad en algo especial. Nuestros usuarios lo agradecerán 😀

Comentarios (4)

  1. Nunca se me había pasado por la cabeza animar esa página, a partir de ahora quizás se lo añado, aunque creo que es mejor ir en vez de a la página del error a la home.

    Un saludo!

  2. En mi desconocimiento del tema jamas pensé que se podía codificar el error 404 para mi pagina web, de verdad muy agradecido con este material porque he comprado un servicio de hosting pero apenas empiezo con el diseño y esta idea del 404 me parece super genial, muchas, que sigan los éxitos, saludos.!

  3. Hola,
    Siempre me ha llamado la atención las cosas relacionadas con el diseño, por lo que estoy pensando en estudiarlo, y me gustaría saber si podrían darme algún consejo o recomendación.
    Gracias.

    1. Saludos Estefanía,

      pues mucho ánimo y experimentar. Sigue a los blogs de referencia y las ultimas novedades (SiloMag te puede servir para ello).
      Pero lo dicho, dedicarle muchas horas y probar cosas nuevas en codepen o en local.

      Suerte!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *