CSS é uma linguagem incrível e que tem uma versatilidade fantástica. Podemos fazer praticamente tudo em CSS, bastando para isso perceber o seu conceito e ter imaginação para inovar nas nossas criações. A grande vantagem da utilização de CSS é que pode substituir muitas imagens do seu site, para que este fique mais rápido e leve, melhorando assim toda a navegabilidade do seu projeto.

Clique aqui e comece hoje mesmo o seu novo blog em 5 minutos!

balão diálogo

Para o ajudar na personalização do seu site, hoje vamos ensinar-lhe a criar um balão de diálogo que pode usar no seu site para, por exemplo, citações ao longo do seu texto, entre outras utilizações possíveis. Verá que se adotar medidas e começar a substituir grande parte das imagens pesadas do seu layout por códigos CSS bem feitos, obterá resultados muito melhores ao nível da velocidade de carregamento e pode inclusive melhorar a qualidade visual do seu blog.

Como posso fazer o meu balão de diálogo?

Para ter o seu balão de diálogo, terá que executar 2 simples passos. O primeiro será o HTML do balão e o segundo trabalhar o código CSS do mesmo.

O código HTML é muito simples:


 

Eis o código CSS:

.balaodialogo {
position: relative;
background-color: #000;
border-radius: 10px;
width: 200px;
height: 150px;
line-height: 150px; /* vertically center */
color: white;
text-align: center;
}

.balaodialogo:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid;
border-top-color: #000;
top: 100%;
left: 50%;
margin-left: -15px; /* ajustar pela largura do balão */
}

O resultado deverá ser um balão semelhante ao que está em baixo:

exemplo

Se desejar, pode alterar a seta do balão, podendo optar por um dos seguintes códigos em baixo (substituindo pelo balaodialogo:after):

.balaodialogo:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Posição da seta */
 
.balaodialogo-top:after {
  border-bottom-color: #292929;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.balaodialogo-right:after {
  border-left-color: #292929;
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.balaodialogo-bottom:after {
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.balaodialogo-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

 

Com este código você pode tornar o seu blog ainda mais agradável sem ter que torna-lo mais pesado! Aproveite e faça um upgrade aos seus quotes e comentários!

Até já!