Errores 404 Creativos con CSS: “Cómo Crearlos”

Publicado por MATR1X en

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 comouna oportunidad para ayudar y guiar al usuariohacia el contenido o sección que está buscando, ofreciéndole una buenaexperiencia 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. 

Error 404 con animaciones CSS en texto

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 elementospanpara poder darle estilo y asignarle las animaciones. En este caso hemos necesitado un elementospanpadre y otro hijo para asignarle correctamente las transformaciones. También puedes optar por englobar los números en un elementoh1para que sea más semántico:

<sectionclass="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@keyframestanto 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);
	}
}

Animando un diseño gráfico de error 404

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 propiedadbox-shadowde 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:

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

En cuanto al CSS, muchos backgrounds CSS múltiples, como ya vimos en elejemplo 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

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:

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

Mientra que en el CSS necesitamos definirlos pseudoelementos::aftery::beforedel 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 lasnuevas tendenciascon 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😀

Fuente: Silocreativo.com


MATR1X

Tengo conocimientos de: Edición de Vídeo conozco de After Effetcs y Premiere. Programación Web en lenguajes como PHP, JavaScript, MySQL, HTML y CSS. Animaciones 3D en Cinema 4D no muy complejas y también conozco de Photoshop

2 comentarios

0rlan2 · 13 agosto, 2019 a las 12:43 PM

Men sigue con este sitio que está super, siempre se aprende algo nuevo …, publica mas tutoriales como este

Deja una respuesta

Tu dirección de correo electrónico no será publicada.