Como fazer notificações ao estilo do Facebook com CSS

Escrito por sara williams | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer notificações ao estilo do Facebook com CSS
Facebook é muito famosa, entre outros motivos, pelas caixas de notificação (Thomas Northcut/Lifesize/Getty Images)

O Facebook usa vários tipos diferentes de notificações, incluindo barras na parte inferior da página. Esse truque não é difícil de implementar no seu próprio site, embora precise de mais códigos além do CSS (folhas de estilo em cascata) para criar o texto para as próprias notificações. É preciso apenas um código HTML simples para criar a caixa e estilizá-la, e uma linha de CSS para fixá-la.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra a sua página web no bloco de notas ou em um editor de texto e navegue até um ponto anterior à tag "</body>" e a quaisquer tags "<script>" que você puder encontrar. Crie um div no seu código HTML e identifique-o usando o ID "notification". Adicione a esse div um cabeçalho e um parágrafo:

    <div id=”notification”> <h3>Notificação</h3> <p>O texto da notificação vai aqui.</p> </div>

  2. 2

    Abra a folha de estilos do seu site no bloco de notas ou em um editor de código. Adicione em uma nova linha seletores para o div, seu cabeçalho e o texto do parágrafo:

    notify {

    }

    notify h3 {

    }

    notify p {

    }

  3. 3

    Estilize a caixa de notificações primeiro. Se quiser imitar o estilo do Facebook, use um fundo branco com uma borda cinza-clara e texto cinza-escuro. Configure a largura para a caixa também.

    notify {

    background: white; color: #555; font-family: Arial, sans-serif; font-size: 12px; border: 1px solid #ccc; width: 200px; }

  4. 4

    Estilize o cabeçalho usando texto branco sobre um fundo azul e adicione um espaço. Desative também as margens configurando-as com o valor "zero":

    notify h3 {

    background: #899ecb; color: white; font-size: 12px; border-bottom: 1px solid #6d8bc9; padding: 5px 20px; margin: 0; }

  5. 5

    Adicione uma margem ao parágrafo dentro da notificação:

    notify p {

    padding: 10px 20px; }

    Como você já estilizou as fontes para a caixa inteira dentro da regra de estilo "#notify {}", não precisará fazê-lo novamente aqui.

  6. 6

    Volte para a regra de estilo "#notify {}" e adicione o posicionamento:

    position: absolute; bottom: 0; right: 0;

    Esse código colocará a caixa de notificações no canto inferior direito da tela do navegador. Se você testar a página em um navegador e tentar se deslocar para baixo, a caixa não ficará fixa.

  7. 7

    Uma linha de código CSS deixará a caixa fixa no lugar:

    position: fixed;

    Mude o "absolute" que você usou para "fixed". Agora a caixa se aderirá ao canto inferior direito.

Dicas & Advertências

  • As instruções aqui abarcam apenas a criação da caixa de notificações em CSS e não as animações, atualizações ou entregas. Use um script do jQuery para adicionar as animações, e entregue mensagens individuais aos usuários através de um script do lado do servidor. PHP é uma linguagem adequada para isso.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível