CSS Shapes e Text Wrap

Que podemos criar formas geométricas e desenhos com CSS, isso já sabemos, mas e se você ainda pudesse fazer seu texto assumir este formato? Conheça CSS Shapes Module 1 e 2.

por Thaiana Poplade 27/05/2014

Manipular textos apenas com o uso de CSS nunca foi tarefa fácil ou em alguns caso, sequer possível. Pensando nisso, a Adobe esta propondo mais uma propriedade para folhas de estilo, que pode salvar vidas :).

Além de criar formatos (retângulos, círculos, triângulos, etc) com CSS, em breve você talvez possa fazer seu texto respeitar o limite do formato e se organizar em volta do elemento. Com isso, fazer aquela capitular, pode ser mais fácil do que parece.

As duas propriedades propostas – shape-inside e shape-outside – ainda estão em draft na W3C e até mesmo fazer testes é um pouco trabalhoso, mas vale a pena entender um pouco do que esta por vir e torcer para que essa seja mais uma feature bem sucedida do CSS3.

**Um pouco de CSS Shapes

** Você já precisou criar um círculo, apenas com CSS?

Se ainda não, abaixo alguns exemplos de formatos bem simples para serem criados com apenas alguns propriedades no CSS.

Círculo: o princípio para criação de um círculo é o uso do border-radius: 100% que arredonda os cantos de seu elemento (a <div> no exemplo) até que esses cantos se encontrem. Segundo Can I Use, o border-radius está sendo 84% suportado pelos navegadores, exceto IE8.

CSS Shapes – Circle

Triângulo: para o triângulo o princípio é zerar a altura e a largura do elemento e trabalhar apenas com as bordas, neste caso, do bottom, _left_ e right. Se você aumentar os valores e trocar as cores, vai entender melhor como funciona e ainda conseguir triângulos com tamanhos de lados diferentes.

CSS Shapes – Triangle

Losango: esta talvez seja uma das mais simples de se fazer. O Losango nada mais é que um quadrado, formato padrão que qualquer elemento com largura e altura fixas assume, com a propriedade transform: rotate que já tem 84% de suporte, exceto pelo IE8 também.

CSS Shapes – Losango

Forma criadas, como eu faço para colocar um texto que circunde o elemento? Nessa hora é que conhecemos a propriedade: shape – outside. O uso da propriedade é simples, basta ter a forma com sua devida largura e altura, adicionar um float e seu texto em seguida. O mais complexo de testar a funcionalidade é que, na aplicação do shape-outside, você ainda pode precisa definir algumas outras coisas: – Que forma o texto vai seguir: hoje as propostas são para “circle”, “ellipse”, “polygon” e “inset” (retângulo); – Que imagem o texto vai seguir (sim, tem essa mágica também); – E qual será a distância entre o texto e a forma. Para completar as sugestões, que já são super bem-vindas, a Adobe também está propondo a propriedade shape-inside que faz o texto assumir um formato dentro da figura geométrica ou de uma imagem. Infelizmente, como ainda estão sendo realizadas as propostas e os testes, é muito difícil explicar exatamente como tudo vai funcionar, mas já consegui fazer alguns testes com o shape-outside, que já está um pouco mais evoluído, e divido agora com vocês. Detalhe: Você deve precisar de alguns navegadores bem específicos para visualizar o teste. A  Adobe indica também: http://html.adobe.com/webplatform/enable/

Testing CSS Shape Outside

Alguns links interessantes:

CSS Shapes (criando formas com CSS puro) 

http://www.css3shapes.com/

Proposta da Adobe

http://html.adobe.com/webplatform/layout/shapes/

**Na W3C

** Outside

http://dev.w3.org/csswg/css-shapes-1/

Inside

http://dev.w3.org/csswg/css-shapes-2

Até a próxima.

😉