Mensagens de alerta com CSS

Postado por: Pedro Rogério em

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.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Gostou desse post?

Assine o nosso Feed RSS, siga-nos no Twitter, ou simplesmente nos recomende a seus amigos!

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.

6 Responses to “Mensagens de alerta com CSS”

  1. Igor Pimentel disse:

    Acho que ficaria mais interessante com um ícones (aleta, erro, sucesso, etc), de acordo com a mensagem dada. Fica a dica! ;)

  2. Tárcio Zemel disse:

    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!

    :-)

  3. rafael veloso ferreira disse:

    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+

  4. Eduardo disse:

    Muito boa a dica

Leave a Reply