Lo creas o no, es posible crear Alertas de CSS puro. Entonces, si desea una solución simple y elegante, hay algunos modos de alerta que puede usar.
En este artículo, proporcionaremos algunas alertas CSS hermosas y algunos estilos CSS que puede copiar para crear una alerta hermosa y tal vez animarla con JavaScript o simplemente mostrarla en el servidor después de enviar el formulario o algo similar.
¿Qué son las alertas CSS?
Las alertas CSS son una especie de mensaje de texto que proporciona cierta información al visitante. Pueden aparecer como notificaciones superpuestas, diálogos modales, en línea, etc. Las alertas CSS se clasifican en 4 categorías principales:
- Peligro/Error (Rojo)
- Advertencia (Amarillo/naranja)
- Información (Azul)
- Éxito (verde)
Las 28 mejores alertas de CSS
Ya sea que esté buscando alertas solo de CSS, alertas animadas de JavaScript o simplemente algunos estilos hermosos, consulte nuestra lista a continuación:
1. Alertas de CSS puro que se pueden cerrar
Estas alertas de temática ligera solo usan CSS.
Si prestas atención, notarás cómo se pueden cerrar al hacer clic sobre ellos o en el icono de la “x”.
Este tipo de alerta puede resultar útil cuando se representa en el lado del servidor. Por ejemplo, al enviar un formulario a través de PHP o node.
2. Hermosa y básica alerta de solo CSS
Aquí hay una hermosa alerta creada con CSS y sin javascript.
Los ejemplos muestran un modal básico una vez que se enfoca el “botón”.
Utiliza el pseudoelemento :target para alternar la visibilidad de la ventana emergente con la alerta.
3. Superposición de alerta modal en CSS puro
Esta alerta utiliza CSS para mostrar condicionalmente un mensaje de diálogo modal.
Utiliza una entrada de casilla de verificación y la propiedad CSS :checked para determinar cuándo mostrar/ocultar la alerta.
Es una técnica utilizada para muchos elementos CSS con 2 estados, como menús de hamburguesas o interruptores de palanca CSS.
4. Alertas CSS multicolores de Material Design
Este es un gran ejemplo de algunas notificaciones de alerta hermosas y modernas.
Hacen uso de colores fuertes y vivos en combinación con Iconos de diseño de materiales para crear un diseño tan hermoso.
5. Alertas CSS puras básicas
Si buscas simplicidad, entonces estas alertas son para ti.
No hacen uso de ningún proveedor externo. Sin marco, sin JS y sin iconos.
Solo algunos CSS simple para darle un estilo básico a sus mensajes de alerta.
6. Alertas de luz en puro CSS
Si está buscando algunas alertas bonitas para su página de tema ligero, ¡estas son definitivamente para usted!
Me gusta especialmente el error y la alerta de éxito.
Usan un enfoque mínimo para crear algunos estilos hermosos para sus componentes de alerta.
Ni siquiera usarán íconos, pero eso no evitará que cumplan su propósito a la perfección.
7. Alertas de viento de cola CSS
Si utiliza Viento de colaCSS como su marco CSS, entonces desea utilizarlo para mostrar alertas.
Este ejemplo muestra cómo mostrar varias alertas en la parte inferior de la página.
Estas alertas vienen con varios colores e íconos según el tipo de alerta: error, éxito, información o alerta de advertencia.
8. Mensaje de alerta de diálogo modal con CSS
Otra solución única de CSS para crear un modal de alerta con estilo.
Los modales muestran un cuadro con algo de contenido y un botón de cierre.
Para cerrar el modal, puede hacer clic en la superposición oscura o en el botón de cierre.
Este ejemplo utiliza la misma técnica que otros componentes de dos estados. Utiliza una casilla de verificación para rastrear el estado con CSS.
9. Alerta temporal de Vanilla JS y CSS
Una alerta verdaderamente moderna que muestra una notificación en la esquina superior derecha de la página.
La alerta expira y muestra una barra de progreso animada para mostrar el tiempo restante.
El diseño se ve súper moderno y, lo mejor de todo, ¡no usa ningún componente externo! Pure CSS y Vanilla JS hacen la magia.
10. Múltiples Modales Simples CSS Solamente
Estos cuadros de diálogo modales de alerta hacen un uso inteligente del pseudoelemento :target para controlar el estado del modal.
Las alertas se muestran al hacer clic (y enfocar) los textos.
11. Notificación de alerta CSS grande
Estas alertas son un poco más originales que otras.
Si está buscando una gran notificación con algo de personalidad, estas pueden ser para usted.
No utilizan ninguna biblioteca de proveedores externos y utilizan iconos SVG.
jQuery es totalmente opcional. Solo agrega la función de cierre, pero se puede reemplazar si es necesario para JS simple o incluso CSS puro.
12. Alertas de texto jQuery cronometradas
Si está de acuerdo con usar un poco de JS (o jQuery), estas son algunas alertas hermosas.
A diferencia de otras, estas alertas se apilan una debajo de la otra en la parte superior de la página.
Personalmente, creo que se ve muy bien y me gusta más que las notificaciones laterales, especialmente para mensajes importantes o errores.
Hay un poco de jQuery involucrado, pero puede convertirlo fácilmente en Vanilla JS.
13. Alertas de color solo CSS con TailwindCSS
Para aquellos a los que les gusta el diseño plano y usan TailwindCSS, estas alertas pueden ser para ti.
Personalmente, me gusta la selección de colores, la sensación moderna y la simplicidad de su diseño.
14. Alerta de cierre de CSS para juegos
Para una apariencia menos seria, esta alerta es una gran candidata.
Es grande, es muy original y está hecho. íntegramente con CSS.
15. Viento de cola inferior derecho + alertas alpinas
Para aquellos a los que les gusta usar las últimas tendencias y hacer uso de TailwindCSS y Alpine.js.
Uso simple de notificaciones de alerta que se muestran en la parte inferior derecha.
Cada tipo de alerta tiene su icono y se reemplazan cuando se hace clic continuamente.
16. Mensaje de alerta de Bootstrap 5
Ejemplo de una alerta simple usando Arranque 5.
El mensaje de alerta acepta un título y un cuerpo, por lo que resulta útil para ese tipo de alerta que requiere un poco más de contexto.
17. Alertas de Bootstrap 4 (solo CSS)
Una gran solución para los desarrolladores que utilizan Arranque 4.
En este caso, no hay JavaScript involucrado y las alertas solo se animan al cargar la página.
Esto puede ser útil cuando se muestran en el lado del servidor después del envío del formulario, por ejemplo.
18. Alertas con íconos y mensajes de texto
Una implementación muy simple de un componente de alerta.
Están hechos con CSS y el único componente externo que usan es FontAwesome para los íconos.
Usan un fondo blanco para el mensaje de alerta y agregan un toque de color en el fondo del icono para definir el tipo de alerta que es.
19. Mensaje de alerta de Foundation Framework
Si está trabajando con el marco de la fundaciónentonces es posible que desee considerar estas alertas.
Se agotan después de un tiempo y pueden apilarse uno encima del otro cuando se activan continuamente.
Entran desde la parte inferior derecha con una animación de deslizamiento rápido.
20. Bootstrap 3.3 Alertas
Para aquellos que todavía están usando Arranque 3.
Estas alertas se apilarán una encima de la otra con una pequeña y linda animación.
21. Alerta CSS de viento de cola con degradado de color
Una hermosa colección de ejemplos de alertas CSS.
Ellos usan CSS viento de cola marco y algunos gradientes y sombras hermosos y sutiles.
Ya sea que use Tailwind CSS o no, puede tomar los estilos de alerta y aplicarlos a cualquier otra alerta para mejorar su diseño.
22. Alerta básica sobre Vanilla JS y CSS
Alerta simple sin marcos y vainilla JS.
No es nada sofisticado, pero hace el trabajo prácticamente solo con CSS.
23. Alertas de estado
Ejemplo de algunas alertas de estado que puedes usar en tu sitio web.
Usan un poco de JavaScript y FontAwesome para los íconos.
24. Alerta de efecto de escala
Este componente de alerta utiliza un efecto de zoom elástico para mostrar la notificación.
La alerta de notificación expirará después de un tiempo.
También utiliza un indicador de progreso para mostrar cuándo desaparecerá la alerta.
25. Grandes componentes modernos de alerta CSS
Utilice este código CSS para crear algunos mensajes de alerta modernos.
Utiliza FontAwesome para mostrar iconos para cada tipo de mensaje de alerta.
26. Alerta de solo CSS de información
Información tipo de alerta.
Se cierra al hacer clic en la X y utiliza una imagen SVG para el icono de información.
27. Mensaje de alerta de CSS de advertencia
Advertencia tipo de alerta.
Se cierra al hacer clic en la X y utiliza una imagen SVG para el icono de advertencia.
28. Alerta de modelo a través de: objetivo en CSS
Una alerta modal muy básica construida completamente en CSS.
El cuadro de diálogo utiliza el estilo mínimo pero aún se ve moderno y totalmente utilizable.
El modal viene con un encabezado y contenido de texto y su contenedor usa algo de sombra de cuadro.
Utiliza una superposición oscura cuando se abre que cierra el modal cuando se hace clic.
¿Cómo muestro una alerta en HTML?
HTML no proporciona una forma de mostrar alertas. Pero puede hacer uso de la función de alerta en JavaScript para hacerlo.
Para obtener más información sobre las alertas, consulte cómo usar las alertas de JavaScript.
He aquí un ejemplo rápido:
<button onclick="alert('Test');">Click here</button>Artículos relacionados
