Animación circular con CSS3
Gizmo, el secretario narcoléptico de Bazinga Studio
10 marzo, 2017
Fondo estilo video juegos con CSS
7 mayo, 2017Las posibilidades de CSS a la hora de crear son ilimitadas. Un mismo efecto puede servirnos para simular un loading, establecer un estilo de error 404 o cualquier otra necesidad que nos surja y queramos reforzar estéticamente.
E ste ejemplo es uno de los que más hemos utilizado, en nuestro caso para los errores 404. Definir un error 404 para que sea original siempre es positivo, tengamos en cuenta que el usuario percibirá un error de contenido, qué menos que alegrar la vista de quién se encuentre en esta situación. En resumen, se trata de no dejar a ninguna persona estancada en tierra de nadie con una página de error y aprovechar para convertir un error en una oportunidad. Esa es nuestra postura sobre los errores 404.
Si quieres ver lo que se puede lograr con css, lo primero es que te olvides de Internet Explorer y vayas a descargar Chrome, Opera o Firefox. En este caso creamos un efecto de movimiento y colores en css, puro código ;) En el siguiente ejemplo se puede ver el Error 404 que tenemos definido para la web de Bazinga Studio. Se trata de una estructura en movimiento que cambia de color y es bastante resultona:
Sea por un error propio o ajeno, es probable que alguna vez en su vida, una web muestre un error 404, ¿por qué no aprovechar para hacer branding?
Con errores propios o ajenos nos referimos a que el error 404 puede aparecer a causa de un fallo en programación, o directamente porque alguien escriba mal una url. También puede salir un error 404 si se cambian direcciones de la web o se eliminan páginas posicionadas en google y no se hace un correcto proceso de redirecciones 301. Por lo tanto, hay que trabajar para evitar cualquier aparición de errores 404, pero hay muchos factores que pueden influir a la hora de que un proyecto web muestre un error 404, lo ideal es que no se muestre nunca, pero eso es imposible. Entonces ¿por qué no aprovechar la situación?
Lo primero, siempre hay que disculparse (Ups, sorry, lo sentimos etc.), una vez hecho esto, lo ideal es acompañar esta disculpa de un visual (los hay de todos los tipos, hay ejemplos geniales en este post de Creative Blog. Y como colofón a todo esto, debemos hacer una llamada a la acción: por ejemplo, dar la opción de ir a la home o a cualquier otra sección que haya en la web y que deseemos destacar.
Los errores 404 no deberían existir, pero en el caso de que existan no dejan de ser una oportunidad para demostrar quiénes somos. Ahora bien, ¿y si usamos este efecto CSS para algo diferente?
Para terminar... ¿por qué no simular un loading?
¿Recuerdas un spot en el que millones de pelotas de colores caían en la ciudad mientras sonaba el cover de 'Heattbeats' de José González? Se trata de una de las campañas más míticas de Sony.
Hagamos un ejercicio de imaginación, supongamos que cuando Sony Bravia lanzó la campaña 'Colour like no other' hubiera necesitado una web en construcción hecha mediante css. El resultado sería el que ves más abajo, como puedes comprobar no hay límites y sólo nuestra imaginación y el buen hacer determinarán cuándo y cómo podemos usar un efecto u otro.
