Hoy nos gustaría compartir un par de estilos simples para las notificaciones de un sitio web. Hay un montón de maneras de mostrar un mensaje discreto a un usuario: a partir de la notificación, con estilo clásico a una barra en la parte superior de la ventana. Realmente no hay límite a lo que los estilos y efectos de notificación creativas pero se debe tener en cuenta para no exagerar si usted no desea hacer su usuario caiga una silla cuando recibe una notificación, Si desea que la notificación sea un mensaje discreto para el usuario, mantener la sencillez y sutileza cuenta el efecto de la apariencia y la desaparición. Utilizamos animaciones CSS para mostrar y ocultar las notificaciones. Algunos de ellos están precedidos por una animación de carga ficticia, lo que podría ser una buena idea para acciones específicas que requieren cierto tiempo en un sistema (es decir, el ahorro, el envío de un mensaje, etc.).
Tenga en cuenta que los efectos sólo funcionan en los navegadores que soportan animaciones CSS y transforma 3D.
Firefox (Win) no parece gustarle box shadows cuando de voltear las cosas se trata, pero la hemos dejado, no obstante, en el efecto bouncy flip porque se ve tan limpio en todos los otros navegadores.
Hemos utilizado algunos recursos que ayudaron a la creación de los efectos:
Algunas animaciones se realizaron con la ayuda de bounce.js para algunos jelliness y de rebote en algunos de los efectos.
Snap.svg se utilizó para la animación / morphing la forma para el efecto de esquina.
SpinKit de animaciones se utilizó para el efecto de carga / hilado que precede a uno de los estilos de notificación.
Animate.css fue utilizado para el efecto bouncy flip .
Los iconos utilizados en algunas de las demos son del Linecons conjunto de iconos y la fuente web fue creado con la App IcoMoon . Tengan en cuenta que esto sólo es con fines de inspiración (aunque se puede encontrar una muy simple script de notificación que le puede resultar útil para su propia aplicación). Hay un montón de grandes plugins y scripts para las notificaciones por ahí, cuál se adapta mejor depende por supuesto de lo que quieres hacer y en qué contexto. Fuente
Espero que hayan disfrutado de aprender algo nuevo hoy, deje su comentarios y recuerden darle LIKE a nuestra pagina en FACEBOOK y siguenos en TWITTER, ayúdanos a seguir creciendo.
