Ajustar texto ou outros elementos às formas de seus conteiners em CSS3

Técnicas CSS para criar textos ou outros elementos que podem ser transformados para se ajustarem a diversas formas que conseguimos com CSS3.

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


Publicado em: 12/12/13
Valorize este artigo:

Em um artigo anterior em Criarweb.com aprendemos muito sobre a propriedade CSS3 border­radius e pudemos comprovar que, com certa facilidade, somos capazes de construir diversas formas que podemos aplicar aos conteiners.

Neste texto seguiremos explicando algumas das técnicas aprendidas na conferencia de Lea Verou sobre Border­Radius, com conhecimento prático e experimental, que solucionarão algumas das necessidades que você poderá ter quando trabalhe com CSS3 e formas (shapes) obtidas com as bordas arredondadas de CSS3.
Todos os exemplos deste artigo podem ser vistos em uma página independente.

Ajustar o texto às formas que estamos construindo

Como você pode observar ao colocar em funcionamento estes exemplos, os textos nem sempre se ajustam de maneira predeterminada às formas que estamos criando com CSS3, ou seja, muitas vezes o texto sai da caixa porque não segue a forma circular que lhe estamos aplicando ao arredondar o canto. Em resumo, para o texto, dá igual que o canto esteja arredondado. Para fazer com que os textos se ajustem às formas que estamos construindo temos varias aproximações.

Aproximação 1: Usar overflow
A opção mais simples, mas também a mais “rude”, é simplesmente fazer com o que ultrapasse o espaço arredondado não seja visível. Isto se consegue ocultando as partes do conteúdo que saem da forma com o atributo overflow: hidden.

border­radius: 200px;
overflow: hidden;

Isto pode funcionar muito bem com certo tipo de conteúdo, como imagens que não queremos que se vejam quadradas, mas com uma silhueta dada, seja circular, elíptica ou qualquer outra das que possamos conseguir com CSS3.

No próximo exemplo podemos ver como uma imagem jpg, que é sempre um arquivo de dimensões retangulares, pode ser mostrado em uma página como se fosse de forma circular, apenas introduzindo-o em uma caixa que fizemos redonda graças a border­radius e fazendo com que as partes da imagem que se saem da caixa estejam ocultas.

width: 400px;
height: 400px;
border­radius: 100%;
overflow: hidden;
background: url("midesweb.jpg") no­repeat;

O problema desta técnica é que perdemos informação. Para uma imagem comprovamos que funciona de maneira excelente, mas é desaconselhável quando devemos ler o texto que há dentro de uma forma.

Aproximação 2: usar padding
A segunda aproximação seria usar o padding. Simplesmente colocamos um padding de dimensão suficiente para que o texto não se aproxime demais da borda do elemento.

border­radius: 130px; padding: 50px;

O problema desta segunda técnica é que o texto não se adapta à forma, senão que segue sendo disposto em "quadrado". Pelo menos não se perde informação, porém não conseguimos que o texto se adapte ao conteiner, aproveitando seu espaço e gerando a mesma forma circular que a caixa tem.

Aproximação 3: usar shape­inside de CSS3
A terceira aproximação seria a mais adequada, embora ainda não esteja disponível em todos os navegadores, só de maneira experimental em Google Chrome. Trata-se das "CSS Exclusions", com as que podemos definir a área útil onde deve ser mostrado o conteúdo em um elemento para que não seja um quadrado, mas outro tipo de forma, atendendo a diversas regras para criá-las. È um assunto do que, no futuro, certamente ouviremos falar muito e que abrirá novas e impactantes maneiras de maquetar conteúdo para a web.

Nota: No momento que você leia este artigo esta funcionalidade de CSS provavelmente já estará disponível em outros navegadores, em versões que vão aparecendo.

Tudo isto se consegue com a propriedade CSS3 shape­inside, indicando a forma que queremos utilizar para definir o conteúdo, suas dimensões e características. No entanto, como dizíamos, você não vai poder ver esta propriedade neste momento a não ser que tenha uma plataforma que a aceite. Para poder ativá-la devemos dispor do navegador "Google Chrome Canary", que é uma versão de Google Chrome onde podemos habilitar todas as características experimentais que estejam sendo desenvolvidas e que ainda não se encontram disponíveis nos navegadores comuns. Ademais, você terá que ativar um flag específico encontrado sob a classificação "Enable experimental Web Platform features".

Nota: Para acessar as funções experimentais em Chrome acesse a URL chrome://flags e se você buscar a que comentamos você a encontra mais facilmente com a URL chrome://flags/#enable­experimental­web­platform­features ou procure com CTRL + F e as palavras "Enable experimental Web Platform features". Basta você habilitar esta característica e presionar em seguida o botão que aparece para reiniciar o navegador. O uso da propriedade CSS shape­inside, que nos permite atribuir uma forma ao conteúdo que aparece dentro de um conteiner, é bem simples na realidade.

Indicamos a forma que se deseja utilizar, neste caso um retângulo e suas dimensões. ­

webkit­shape­inside: rectangle(0,0,100%,100%,50px,50px)

Nota: Observe que colocamos o prefixo ­webkit­ que serve para os navegadores baseados em webkit, no futuro não será necessário, logicamente.

As propriedades do retângulo que indicamos são: coordenadas x e y onde começa a ser mostrado o conteúdo dentro do conteiner onde estamos, dimensões da forma retangular e as últimas duas são a borda arredondada que queremos aplicar.

Poderíamos utilizar todas estas propriedades CSS para fazer com que o texto se ajuste a um retângulo com cantos arredondados:

width: 600px;
height: 380px;
padding: 5px;
border­radius: 50px;
webkit­shape­inside: rectangle(0,0,100%,100%,50px,50px);
background­color: #fcc;
font­size: 0.8em;
text­align: justify;

Agora você pode ver propriedades para fazer um círculo e texto que se adaptará perfeitamente a essa forma circular.

#forma4{
width: 400px;
height: 400px;
padding: 5px;
border­radius: 100%;
webkit­shape­inside: rectangle(0,0,100%,100%,100%,100%);
background­color: #cfc;
font­size: 0.8em;
text­align: justify;
}

Essas formas podem ser postas em marcha no exemplo, mas se você não tem um navegador compatível e também não quiser perder tempo configurando-o, mostramos como é visto em Chrome Canary.

Como você pode ver, esta proposta tem bastantes possibilidades. Porém, vamos avisando que a potencia que se pode entrever com a leitura destas linhas não chega nem perto das possibilidades que estas formas terão no futuro, e que pode visto, inclusive, em outros artigos na web dedicados especificamente a esta propriedade experimental. Ainda há muitas coisas que ajustar e comentar sobre shape­inside, mas o certo é que tem um futuro prometedor.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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