Tableless

Busca Menu

CSS Shapes e Text Wrap

Seja o primeiro a comentar por

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.

😉

 

Publicado no dia