Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
No artigo anterior, vimos a criação de Formas do CSS, permitindo definir a verdadeira forma de um elemento. Aprendemos o básico, criamos um círculo e envolvemos algumas linhas de texto ao seu redor. Exploremos formas mais complexas, tornando a estrutura de nossas páginas mais ricas e menos quadrado.
Criando um Polígono
Além de formas simples como círculos e retângulos, também podemos criar polígonos, formas de múltiplos lados (geralmente, cinco ou mais) como pentágono e hexágono. Para tanto, usamos a função polygon() do CSS que recebe múltiplos valores separados por vírgula, que são as coordenadas da forma:
1 |
.shape { |
2 |
float: left; |
3 |
background-size: contain; |
4 |
background-repeat: no-repeat; |
5 |
margin: 30px; |
6 |
width: 265px; |
7 |
height: 265px; |
8 |
shape-margin: 20px; |
9 |
}
|
10 |
.pentagon { |
11 |
background-image: url('../img/pentagon.svg'); |
12 |
shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); |
13 |
}
|
Com o código acima, adicionamos cinco coordenadas, assim, gerando uma forma de pentágono. Adicionar outra coordenanda à função tornará a forma em um hexágono, outra num heptágono, outro num octógono e por aí vai.
Criar formas poligonais manualmente não é tão fácil quanto criar círculos ou elipses, especialmente se o polígono for complexo e envolver dezenas de coordenadas. Felizmente, há uma ferramenta útil que facilita a criação de formas do CSS.
Usando Editor de Formas do CSS
Edito de Formas do CSS é uma extensão do Chrome. Ao instalá-la, ela adiciona uma nova aba chamada Shapes nas Ferramentas para Desenvolvedores sob a aba Elements, junto de outras sub-abas (Styles, Computer, etc).
A aba Shapes conté a propriedade shape-outside casada ao sinal + para ajudar-nos a adicionar funções de Formas do CSS. Selecionemos polygon() e o elemento na página, então comecemos a desenhar a forma diretamente no navegador como se fosse um app gráfico.
Ao desenhar, a extensão atualizará a função do polígono com as coordenadas da forma desenhada e adicionará simultaneamente como um estilo em linha ao elemento. Terminando, copiemos o código gerado e colemos na folha de estilo.
Usanda a mesma técnica podemos desenha facilmente e aplicar qualquer forma à nossa página, por exemplo:
Extrantindo a Forma da Imagem
Outro valor possível para usar na propriedade shape-outside é a função url(), a mesma função que usamos em outros lugares para adicionar imagens de plano de fundo. Nesse caso, a função url() permite a propriedade shape-outside definir uma forma de elemento baseada na imagem.
Podemos escolher a função url() ao invés de polygon() quando temos um gráfico complexo, com muitas curvas e cantos e queremos que nosso conteúdo o envolva suavemente. Ou, ao lidar com conteúdo gerado por usuário, onde definir formas pode ser complicado.
Usaremos esse papagaio macaw da Unsplash. Primeiro, precisaremos cria ruma versão com transparência, por exemplo:
A imagem original do papagio é adicionada em outro container como imagem de plano de fundo:
1 |
.container { |
2 |
background-repeat: no-repeat; |
3 |
background-image: url('../img/parrot.png'); |
4 |
}
|
Limite de Transparência
Para a forma em si, adicionaremos em outro elemento dentro do container e, dessa vez, usaremos outra propriedade de Formas do CSS chamada shape-image-threshold.
1 |
.shape { |
2 |
shape-margin: 15px; |
3 |
shape-outside: url('../img/parrot-shape.png'); |
4 |
shape-image-threshold: 0; |
5 |
}
|
Essa propriedade em particular configura o limite mínimo de transparência que define a forma de uma imagem. Ela recebe valores entre 0 e 1. Assim, se tivermos uma imagem mais ou menos transparente, devemos usar entre 0.8 e 0.5. Nós usaremos valores como 0, já que a área ao redor da forma do papagaio é completamente transparente.
O resultado seria algo mais ou menos assim:
Provendo Alternativa
Suporte dos navegadores à Formas do CSS é decente, embora não espere muito do Firefox, Internet Explorer e Edge. E, respondendo à pergunta de Stephen no tutorial anterior, temos várias opções.
"Isso é legal, mas uma pergunta verdadeira: qual a alternativa para IE/FF? Parece que usar um layout todo com formas daria em algo bem estranho para vários usuários" – Stephen Bateman
Primeiro, podemos usar Modernizr. Modernizr é uma biblioteca JavaScript para teste de funcionalidades de navegador. Garantamos que usamos as opções CSS Shapes e Add CSS ao baixar a biblioteca. Assim, podemos especificar os estilos de layout quando Formas do CSS não são suportadas, assim:
1 |
/**
|
2 |
* When the browser does not support "CSS Shape".
|
3 |
*/
|
4 |
.no-shapes .shape { |
5 |
shape-outside: polygon(); |
6 |
}
|
7 |
|
8 |
/**
|
9 |
* Styles when the browser supports "CSS Shape".
|
10 |
*/
|
11 |
.shapes .shape { |
12 |
|
13 |
}
|
Se carregar o Modernizr é demais, já que apenas queremos testar se o navegador tem suporte a isso, podemos adicionar o JavaScript a seguir:
1 |
if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) { |
2 |
document.body.classList.add('no-css-shape');
|
3 |
}
|
Cada propriedade no CSS vem com seu equivalente no objeto Style do JavaScript, permitindo-nos adicionar estilos dinamicamente através do JavaScript. Ó código detecta se o navegador tem o método shapeOutside e, quando não é o caso, adicionarmos a classe no-css-shape que podemos usar para estilos alternativos.
1 |
.shape { |
2 |
shape-outside: polygon(); |
3 |
}
|
4 |
.no-shapes .shape { |
5 |
|
6 |
}
|
Por fim, podemos usar a sintaxe @support do CSS na folha de estilo, por exemplo:
1 |
@supports (shape-outside: circle()) { |
2 |
.shape { |
3 |
shape-outside: circle(); |
4 |
}
|
5 |
}
|
Nós decidimos qual abordagem se encaixa melhor no projeto.
Uma cois aboa das Formas do CSS é que ela tem uma alternativa natural. Nada demais. Um quadrado. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
— Jen Simmons (@jensimmons) 11 de Fevereiro de 2015
Resumindo
Nesse tutoral, descobrimos como usar a função polygon() nas Formas do CSS e aprendemos como desenhar polígonos usando uma extensão do Chrome. Também aprendemos como usar uma imagem para desenhar formas para nós, muito útil com formas muito complexas. Por fim, apesar do suporte decente das Formas do CSS, discutimos sobre alternativas graciosas para navegadores que não suportam.
Demos
Links Úteis
By
