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: https://html.adobe.com/webplatform/enable/
Testing CSS Shape Outside
Alguns links interessantes:
**CSS Shapes (criando formas com CSS puro) **
Proposta da Adobe
https://html.adobe.com/webplatform/layout/shapes/
**Na W3C
** Outside
https://dev.w3.org/csswg/css-shapes-1/
Inside
https://dev.w3.org/csswg/css-shapes-2
Até a próxima.
😉