Início
Loja
Olá,
Hoje eu vou mostrar como colocar um balão de fala em seu site em CSS3 (acabou a época de usar imagens em suas aplicações web, estamos na era moderna babi
). Segue o tutorial abaixo.
Adicione o seguinte seletor a seu arquivo css
Agora basta adicionar o seguinte código em seu arquivo HTML.
Caso queira adicionar um texto bonitinho no centro do balão, pesquise um pouco sobre como personalizar os textos em CSS3..
Para a melhor edição do código, sugiro que pesquise sobre as linhas do código acima.
— Screen do Balão
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
— Créditos
Tihid
Até,
Hoje eu vou mostrar como colocar um balão de fala em seu site em CSS3 (acabou a época de usar imagens em suas aplicações web, estamos na era moderna babi
). Segue o tutorial abaixo.Adicione o seguinte seletor a seu arquivo css
- Spoiler:
- .nome-seletor{
width: 200px;
height: 150px;
background: #00B3A8;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.nome-seletor:before{
position: absolute;
content: "";
margin-left: -10px;
margin-top: 65px;
border-top: 10px solid transparent;
border-right: 10px solid #00b3a8;
border-bottom: 10px solid transparent;
}
Agora basta adicionar o seguinte código em seu arquivo HTML.
- Spoiler:
- <div class="nome-seletor"></div>
Caso queira adicionar um texto bonitinho no centro do balão, pesquise um pouco sobre como personalizar os textos em CSS3..
Para a melhor edição do código, sugiro que pesquise sobre as linhas do código acima.
— Screen do Balão
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
— Créditos
Tihid
Até,
Última edição por Sєvєηs em Sex Ago 15, 2014 10:52 pm, editado 1 vez(es)
, obrigado por compartilhar.
