English
EspañolCaixas de alerta e avisos em CSS (info, sucesso, atenção, erro)
Escolha os tipos de aviso, o estilo e se a caixa pode ser fechada. A prévia mostra todos os tipos juntos.
Destaque o que não pode passar batido
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Caixas de alerta e avisos em CSS (info, sucesso, atenção, erro): para que serve
Gere as caixas que destacam um recado no site ou no blog: aviso de manutenção, confirmação de pedido, prazo de promoção, erro no formulário ou uma dica no meio do texto. Escolha os tipos, entre quatro estilos (borda lateral, borda inteira, sólido e linha fina), o arredondamento e se a caixa tem botão de fechar.
Cada tipo tem ícone e título próprios, para não depender só da cor, e as cores de texto têm bom contraste com o fundo. A página de ajuda explica quando usar role="alert" e role="status" para os avisos que aparecem depois de uma ação, como o envio de um formulário.
Como usar
- Marque os tipos de aviso.
- Escolha o estilo e o botão de fechar.
- Copie o HTML e o CSS.
Quando usar
- Aviso de manutenção ou de promoção.
- Mensagens de formulário.
- Dicas e observações em posts.
Perguntas frequentes
Qual a diferença entre role="alert" e role="status"?
role="alert" faz o leitor de tela anunciar o aviso na hora, interrompendo o que estava lendo, e serve para erros que aparecem depois de uma ação, como um formulário enviado com problema. role="status" anuncia sem interromper e serve para sucesso. Avisos que já estão na página quando ela abre não precisam de nenhum dos dois, e é assim que a ferramenta gera.
Por que a cor não basta?
Quem não distingue vermelho de verde, ou usa o site em tela monocromática, não percebe a diferença só pela cor. Por isso cada tipo tem um ícone próprio e um título, e as cores de texto têm contraste suficiente com o fundo.
Como mostrar o aviso depois de enviar um formulário?
Deixe a caixa no HTML com o atributo hidden e role="alert" (para erro) ou role="status" (para sucesso) e tire o hidden pelo JavaScript quando acontecer. O leitor de tela anuncia o texto no momento em que ele aparece.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.