Como criar caixas de aviso super atraentes com CSS

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Em nossos sites ou blogs é muito comum precisarmos dar algum aviso para um usuários, seja sobre uma validação, algum erro, ou simplesmente para interagir com o mesmo solicitando alguma informação.

E nada melhor do que poder mostrar estas informações dentro de um box cheio de estilo, que chame a atenção do usuário para aquela informação. E é justamente isso que irei ensinar nesta aula, como criar e estilizar boxes para exibir avisos e informações em seu site de maneira elegante. Além do assunto principal da aula, darei uma dica de como economizar linhas de código em seu CSS utilizando um exemplo muito simples.

E você, gostou desta aula? O que achou do resultado final? Deixe seu comentário e partcipe com sua opinião...

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 11 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Valdir Coxev comentou em

    Ola Ricardo,
    quero tirar um duvida com você, nao estou conseguindo fazer o procedimento para estilo que voce aplicou div com css, tenho seguinte estrutura:
    html

    <div id="formulario border">
    <form ....>
    ......
    </form>
    </div
    
    
    css
    
    #border{
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    }
    #formulario{
    background-color: #EEEEEE;
    box-shadow: inset 0 0 0.5em #434343;
    }

    e nao consego aplicar estilo form para deixar as borda arredondadas

    Responder
  • Douglas comentou em

    Olá ricardo, olha gostei da dica das classes eu mesmo trabalho com html a tempos e nun sabia dessa, outra coisa o vi que você usa o aptana studio ele é melhor que o dreamweaver?

    Responder

Deixe seu comentário