Como criar: Criar mensagem de chamada

Aprenda a usar CSS para criar mensagens de chamada (Callout Message).

Criar mensagem de chamada

Primeiro passo - Adicionar HTML:

<div class="callout">
  <div class="callout-header">Título da Mensagem de Chamada</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Algum texto...</p>
  </div>
</div>

Se você deseja desativar a função de fechar a mensagem de chamada, adicione um <span> Elemento, e definir um onclick Atributo, que representa "ao clicar em mim, ocultar meu elemento pai", ou seja, o contêiner <div class="callout">.

Dica:Usar o entidade HTML "&:times;"Criar letra "x"."

Segundo passo - Adicionar CSS:

Definir estilos para a caixa de mensagem de chamada e botão de fechar:

/* Caixa de mensagem de chamada - fixada na parte inferior da página */
.callout {
  position: fixed;
  margem-baixo: 35px;
  margem-direita: 20px;
  margem-esquerda: 20px;
  largura-max: 300px;
{}
/* Título da mensagem de chamada */
.callout-header {
  padding: 25px 15px;
  fundo: #555;
  font-size: 30px;
  cor: branco;
{}
/* Container da mensagem de chamada/Corpo */
.callout-container {
  padding: 15px;
  cor-fundo: #ccc;
  cor: preto
{}
/* Botão de fechar */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  cor: branco;
  font-size: 30px;
  cursor: pointer;
{}
/* Rato sobre o mouse, altera a cor */
.closebtn:hover {
  cor: claro;
{}

Experimente você mesmo

Páginas relacionadas

Tutorial:Como criar uma mensagem de aviso

Tutorial:Como criar uma nota