Mensagens de alerta com CSS
Postado por: Pedro Rogério emMostrar 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.














class=”amarelo”
class=”alerta”
(=
Acho que ficaria mais interessante com um ícones (aleta, erro, sucesso, etc), de acordo com a mensagem dada. Fica a dica!
Muito interessante! Eu, inclusive, utilizo algo semelhante em meu blog, com o acréscimo de uma pequena imagem ilustrativa para cada situação. Dá um efeito interessante!
class=”muitoBacana”…
Muito bacana Pedro, parabéns, essas e outras pequenas dicas vão fazendo com que o blog evolua e se torne uma biblioteca virtual.
t+
Muito boa a dica