Mensagens de alerta com CSS

Mostrar aos usuários mensagens personalizadas em seu site com CSS é uma tarefa muito simples, isso também pode ser um grande diferencial. Vamos a um simples exemplo para que vocês entendam o propósito do post, imagine uma área de um site com um formulário de comentários, é bem interessante você mostrar alí uma mensagem de uma cor diferenciada do restante dizendo que aquela matéria ainda não possui comentários, ela irá chamar a atenção para o restante do site e quem sabe você não consegue aí alguns.

Uma outra forma também é de que sites que costumam após algum tempo bloquear o formulário de comentários, é mostrar uma mensagem ao usuário que não são permitidos comentários, é interessante também utilizar um cor diferenciada do restante do site para que isso fique bem claro. Aqueles que fazem o uso do Wordpress estão bem familiarizados com mensagens desse tipo que aparecem em amarelo no topo do Admininstrativo quando uma acão é bem sucedida. Você quer aprender a criar mensagens desse tipo, então se atentem ao seguinte código:

CSS

.yellow {background-color:#ffffef; border:1px solid #ffdb4f; color:#ff730b; margin:15px 0; padding:10px}

Agora basta aplicar essa classe criada a qualquer elemento HTML que você deseja que exiba a sua mensagem de alerta. No exemplo, vamos utilizar a tag “p”:

HTML

<p class="yellow">Eu sou uma mensagem de alerta</p>

Vejam no exemplo como funcionariam nossas mensagens, como podem ver, você também pode utilizar imagens, basta ter criatividade.