Como fazer com CSS3 um balão de cartum ou globo de historia em quadrinhos

Por meio de formas CSS podemos implementar, apenas com uma camada e estilos CSS3, os típicos globos de historias em quadrinhos ou balões de cartuns.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 08/7/13
Valorize este artigo:
 
Neste artigo vamos fazer uma oficina prática de capacidades de CSS3 para realizar estilos com distintas formas, que nos podem ajudar a criar essas bolas que servem para incluir os textos com que falam os personagens nos cartuns. Na Espanha, eu sempre chamei estes quadros de "bocadillos" e creio que assim são chamados pela maioria das pessoas, mas também se podem conhecer como "globos". Em inglês são "speech balloon". Em português, balões. Suponho que todos sabem a que me refiro.

Antes de CSS3 não havia outro remédio que implementá-las com truques que incluíam diversas camadas noHTML e o uso de imagens PNG, ou GIF com fundos transparentes. Já sabemos que essa não era a melhor solução, pois no HTML temos que manter apenas o conteúdo e deixar a forma ou o aspecto para CSS.

Agora podemos usar algumas técnicas, medianamente simples, que nos ajudarão a realizar no HTML uma única unidade de conteúdo com o texto do balão e por meio de CSS3 especificar o estilo para que se pareça ao que seria o globo do cartum ou historinha.

Para ver a que me refiro, simplesmente podemos ver o exemplo em funcionamento com uma apresentação de várias camadas com exemplos de globos de cartuns.
 

A técnica, formas em CSS3, triângulo + caixa arredondada

Devo reconhecer que a técnica não é minha, mas vi fazê-la e pude modificá-la um pouco para adaptá-la às minhas necessidades. A ideia original sobre como fazê-la está em CSS3 Shapes onde você tem um recurso com vários tipos de formas em CSS3 e a maneira de realizá-las.

Começamos fazendo um triângulo com CSS3:
O exemplo do balão está composto na verdade por duas formas distintas. Um triângulo e um quadrado com cantos arredondados. Começamos fazendo o triângulo que é mais simples.

O compomos a partir de uma camada vazia:

<div id="triangulo">
</div>

E aplicando estilos CSS nos que basicamente jogamos com as bordas, para produzir os cantos do triângulo. Se você observar, tanto a altura quanto a largura estão em zero e com as bordas conseguimos definir os três lados.

#triangulo{
width: 0;
height: 0;
border­bottom: 30px solid #55f;
border­right: 20px solid transparent;
border­left: 20px solid transparent;
}

Este triângulo define sua altura com o tamanho do "border­bottom" e sua largura pelas bordas da direita e esquerda em soma. Para que tenha lados iguais, a largura pela direita tem que ser igual à largura pela esquerda. Na realidade, é um triângulo isósceles com o ângulo de cima mais agudo , o que dá a impressão de apontar para cima, embora na tela do computador se veja quase como um equilátero.

Jogando com as propriedades de "border" você pode mudar facilmente as características do triângulo. Você pode testar mudar as dimensões das bordas para produzir outros ângulos. Ou então pode mudar por exemplo "border­bottom" por "border­top" para que o triângulo aponte para baixo em vez de apontar para cima.

A caixa arredondada:
É tão fácil fazê-la quanto usar uma camada com borda arredondado, graças ao "border­radius" de CSS3.

<div id="balao">
Testando o balão ou "globo de falar", ou como você o chame.
</div>

Seu CSS seria o seguinte:

#balao {
padding: 10px;
width: 220px;
border­radius: 10px;
background­color: #f80;
font­family: "trebuchet ms", tahoma, verdana, sans­serif;
font­size: 1.4em;
}

Há pouco o que comentar aqui. Simplesmente observar o "border­radius" e ajustar seus valores ao gosto de cada um ou às necessidades do desenho. Técnica ":before":
A parte mais interessante de tudo isto é usar a técnica ":before" de CSS2 e que já podemos usar com liberdade em quase todos os navegadores (tirando os mais velhos Internet Explorer que cada dia menos deveriam nos preocupar, embora isso seja outra discussão).

Nota: Os ":before" ou ":after" são uns pseudo-­elementos de CSS2 que já foram explicados em outro artigo em CriarWeb.com. Pseudo­element em CSS (pseudo-elementos)

No nosso caso a situação é simples: partimos de uma camada do balão , onde introduzimos o texto que queremos que haja dentro do globo. Essa camada tem apenas os cantos arredondados. A seguir colocamos com o pseudo­-elemento :before o que seria o triângulo do globo.

#globo:before {
content:"";
position: absolute;
width: 0;
height: 0;
border­top: 20px solid transparent;
border­right: 30px solid #f80;
border­bottom: 20px solid transparent;
margin: 10px 0 0 ­32px;
}

Como você vê, com :before indicamos que nos coloque um texto antes do elemento "#balao". O conteúdo será a cadeia vazia (pois para fazer o triângulo partimos de uma camada vazia). Depois colocamos os estilos CSS que necessitamos para fazer o triângulo, descritos anteriormente, mais uma margem para colocar o triângulo no lugar desejado em relação ao globo de texto.
 

Mudar o lugar onde está a "ponta" do balão

A partir daqui é bastante simples alterar nosso balão para que a ponta esteja em diferentes lugares, de modo que possamos maquetá-lo apontando para onde necessitemos. Agora vamos fazer um globo que tem a ponta para cima.

Partimos sempre de uma caixa que contém o texto que queremos que tenha no globo de texto.

<div id="balaoacima">
Testando outro balão com o triângulo acima.
</div>

A seguir aplicamos nossos estilos CSS para convertê-lo em um típico quadro de texto falado em Um cartum ou historinha.

#balaoacima {
padding: 10px;
width: 220px;
border­radius: 10px;
background­color: #8f0;
font­family: "trebuchet ms", tahoma, verdana, sans­serif;
font­size: 1.4em;
}
#balaoacima:before {
content:"";
position: absolute;
width: 0;
height: 0;
border­bottom: 30px solid #8f0;
border­right: 20px solid transparent;
border­left: 20px solid transparent;
margin: ­30px 0 0 90px;
}

Isso é tudo! Esperamos que seja útil para vocês. As aplicações são as que se desejem, mas creio que uma das mais interessantes seja para tornar divertidos "tip" ou "tooptip" que podemos mostrar e ocultar para assinalar qualquer tipo de informação contextual, ou marcar de uma maneira simpática alguns elementos de nossa página.

O bom desta técnica é que não se mistura o conteúdo com a apresentação. Simplesmente se coloca uma camada normal e padrão com um texto e todos os estilos para a apresentação são feitos por meio de CSS3, de maneira totalmente autônoma ao conteúdo.
 





Manual: CSS 3


Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato