Cajas de alerta y avisos en CSS (info, éxito, atención, error)
Elige los tipos de aviso, el estilo y si la caja se puede cerrar. La vista previa muestra todos los tipos juntos.
Cómo usarResalta lo que no puede pasar desapercibido
Disponible en: 
Cajas de alerta y avisos en CSS (info, éxito, atención, error): para qué sirve
Genera las cajas que destacan un mensaje en el sitio o en el blog: aviso de mantenimiento, confirmación de pedido, plazo de promoción, error en el formulario o un consejo en medio del texto. Elige los tipos, entre cuatro estilos (borde lateral, borde completo, sólido y línea fina), el redondeo y si la caja tiene botón de cerrar.
Cada tipo tiene ícono y título propios, para no depender solo del color, y los colores de texto tienen buen contraste con el fondo. La página de ayuda explica cuándo usar role="alert" y role="status" para los avisos que aparecen después de una acción, como el envío de un formulario.
Cómo usar
- Marca los tipos de aviso.
- Elige el estilo y el botón de cerrar.
- Copia el HTML y el CSS.
Cuándo usar
- Aviso de mantenimiento o de promoción.
- Mensajes de formulario.
- Consejos y observaciones en publicaciones.
Preguntas frecuentes
¿Cuál es la diferencia entre role="alert" y role="status"?
role="alert" hace que el lector de pantalla anuncie el aviso de inmediato, interrumpiendo lo que estaba leyendo, y sirve para errores que aparecen después de una acción, como un formulario enviado con problemas. role="status" anuncia sin interrumpir y sirve para éxito. Los avisos que ya están en la página cuando se abre no necesitan ninguno de los dos, y así los genera la herramienta.
¿Por qué el color no basta?
Quien no distingue el rojo del verde, o usa el sitio en una pantalla monocromática, no percibe la diferencia solo por el color. Por eso cada tipo tiene un ícono propio y un título, y los colores de texto tienen contraste suficiente con el fondo.
¿Cómo mostrar el aviso después de enviar un formulario?
Deja la caja en el HTML con el atributo hidden y role="alert" (para error) o role="status" (para éxito) y quita el hidden con JavaScript cuando ocurra. El lector de pantalla anuncia el texto en el momento en que aparece.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.