Estilos para notificaciones

Hace casi un par de años, en el Codepen Challenge Toast Notifications de la segunda semana de marzo de 2024, hice unas tostadas de notificaciones inspiradas en diseños de algunos artistas de dribbble.com.

Las notificaciones están creadas con CSS y he usado el truquito del input:checked para activar las animaciones. Puedes hacer clic en los iconos para abrir la notificación correspondiente y puedes cerrarla desde la propia notificación o volviendo a hacer clic en el mismo icono.

Realmente lo útil es el diseño de las notificaciones no la funcionalidad, ya que esta es solo para mostrar las diferentes versiones (Help, Success, Warning y Error) de cada uno de los estilos.

Son cuatro estilos diferentes; Limpio, Degradado, Ciber y Manchado, con las cuatro versiones que antes comentábamos para cada estilo, en total 16 notificaciones que os muestro a continuación.

Clean Toast Notifications – CSS

Notificaciones con fondos blancos, barras verticales de color y bordes redondeados, un estilo limpio y claro.

See the Pen Clean Toast Notifications – CSS by Josetxu (@josetxu) on CodePen.

Gradient Toast Notifications – CSS

Notificaciones con degradados de color en bordes redondeados, e iconos medianos.

See the Pen Gradient Toast Notifications – CSS by Josetxu (@josetxu) on CodePen.

Cyber Toast Notifications – CSS

Notificaciones con fondos con efecto cibernético usando degradados, bordes rectos, e iconos grandes.

See the Pen Cyber Toast Notifications – CSS by Josetxu (@josetxu) on CodePen.

Splashed Toast Notifications – CSS

Notificaciones con fondos con efecto salpicado, bordes super redondeados, e iconos tipo comentario superpuestos. No se ha usado ninguna imagen, todos los dibujos están hechos solo con CSS.

See the Pen Splashed Toast Notifications – CSS by Josetxu (@josetxu) on CodePen.

Pues ahí quedan estos estilos para vuestras notificaciones, espero que os sirvan. Quizá en un futuro publique algunos más.