Mais
×

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

Atualizado em 20 julho, 2017

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.

Instruções

Facebook é muito famosa, entre outros motivos, pelas caixas de notificação (Thomas Northcut/Lifesize/Getty Images)
  1. Abra a sua página web no bloco de notas ou em um editor de texto e navegue até um ponto anterior à tag "" e a quaisquer tags "

  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. 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. 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. 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. 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. 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.

Aviso

  • 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.
Cite this Article A tool to create a citation to reference this article Cite this Article