Introdução
Fala galera, tudo bem com vocês? o post de hoje vai falar sobre as mais diversas formas que conseguimos fazer no CSS, como triangulos, circulos, losangos, e foi feito para aquelas pessoas que quando se deparam com uma seta, ou uma dobrinha no layout ja entram em desespero achando que vão precisar recortar mais uma imagem pra ser carregada no site.
Sei que tem uma série em aberto sobre canvas, e nele também conseguimos fazer várias formas geométricas, mas o negócio é o seguinte, nem sempre precisamos iniciar uma ferramenta tão poderosa quanto o canvas para fazer desenhos tão simples.
E como de costume, no final teremos um resultado bem legal para termos uma idéia daquilo que podemos fazer utilizando somente html + css.
Formas
Antes de começarmos a por a mão na massa para fazer nosso desenho, vamos falar de como fazer as formas usando o CSS.
obs:para ficar simples nas áreas de código aqui do blog, irei implementar somente o CSS e deixarei como deve ficar a tag html nos comentarios.
Retângulos
Retângulos são a forma mais simples(sempre), e você praticamente monta retângulos aos montes com o CSS, afinal todo container novo ja vem nesse formato quadradão.
O máximo que vamos fazer aqui é definir uma altura/largura e um background-color para utilizarmos essa forma onde quer que seja necessária no nosso desenho.
...
#retangulo1{
width: 100px;
/* quadrados são retangulos com width = height */
height: 50px;
background-color: #145267;
}
/* no html: <div id="retangulo1" ></div>
...
See the Pen oBYaaL by Matheus Mesquita (@mathmesquita) on CodePen.
Circulos
Talvez antigamente fazer um circulo fosse uma tarefa muito difícil, mas hoje em dia graças a propriedade border-radius, nós conseguimos fazer eles com tranquilidade.
Se adicionarmos os pseudo-elementos ::after e ::before, conseguimos até fazer segmentos do circulo.
...
#circulo1{
/* para o circulo ser perfeito, ele tem que ser um quadrado
caso contrario acabariamos formando uma elipse */
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #145267;
}
#circulo1quarto{
width: 100px;
height: 100px;
border-top-left-radius: 100%;
background-color: #145267;
}
/* no html: <div id="circulo1" ></div>
no html: <div id="circulo1quarto" ></div>
...
See the Pen apBRQO by Matheus Mesquita (@mathmesquita) on CodePen.
Triangulos
Acho que é uma das formas mais legais de se fazer no CSS, a principio pode ser esquisito, mas iremos faze-la utilizando somente o border-width e border-color.
...
#triangulo1{
/* para a menos que usemos a propriedade box-sizing:border-box
nós precisamos definir o width com o valor 0 */
width: 0px;
/* a borda que terá cor dependerá de qual sentido
você quer seu triangulo apontando */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
/* o tamanho da base do nosso triangulo é definida
pela soma das duas bordas transparentes
15 + 15 = 30px de base que teremos */
/* como queremos nosso triangulo apontando para cima
botamos a borda em baixo */
border-bottom: 30px solid #145267;
/* o tamanho da borda colorida irá definir a altura
do nosso triangulo, 30px de altura que teremos */
/* para saber a borda correta é que receberá a cor
é só botar na borda oposta a o lado que você apontará
Ex: para esquerda < borda na direita */
}
/* no html: <div id="triangulo1" ></div>
...
See the Pen EZNdGa by Matheus Mesquita (@mathmesquita) on CodePen.
Losangos
Apesar de não ser uma forma primitiva, decidi dedicar esse espaço para falar dos losangos mais como uma forma de apresentar para vocês o que conseguimos fazer com as outras formas básicas.
...
#losango{
/* relative para nossos elementos não fugirem */
position:relative;
/* escolhemos o tamanho do nosso losango */
width: 50px;
height: 140px;
}
#losango::after{
/* content é OBRIGATÓRIO, se não tiver, o pseudo-elemento
não será renderizado no DOM. */
content:'';
position:absolute;
/* importante, a direção de alinhamento(bottom, top, right, left)
tem que ser declarada no mesmo sentido que a nossa borda "colorida"
o valor 70 é a metade da altura do losango, se o losango
estivesse deitado, seria metade da largura,
e alinhado ao left+border-left "colorida" */
bottom: 70px;
border-bottom: 70px solid #192314;
border-left: 25px solid transparent;
border-right:25px solid transparent;
}
#losango::before{
content:'';
position: absolute;
/* alinha ao top, borda no top "colorida" */
top: 70px;
border-top: 70px solid #192314;
border-left: 25px solid transparent;
border-right:25px solid transparent;
}
/* no html: <div id="losango" ></div>
...
See the Pen VPmENp by Matheus Mesquita (@mathmesquita) on CodePen.
Só isso ?
"Show matheus, você ensinou como fazer as formas, mas eu não tenho idéia de como posso aplicar isso".
Se você pensou isso, eu preparei esse exemplo abaixo para te mostrar um desenho de uma casa simples e que ja da pra fazer com todo o conhecimento adquirido nesse post.
See the Pen Casinha desenhada com CSS by Matheus Mesquita (@mathmesquita) on CodePen.
Dificil de impressionar
Se você é desses que é dificil de impressionar e não achou nada demais naquela casinha simples, segue aqui um outro exemplo do que podemos fazer usando somente CSS.
See the Pen CSS ONLY Girl Running by Adam Walker (@renduh) on CodePen.
Posso fazer um post explicando como montar um desenho semelhante a esse, lembrando que ele não foi feito por mim! E sim por esse usuario aqui.
Conclusão
Esse post foi bem básico, falamos somente de formas simples e no final dei um exemplo do que ja é possivel montar com o conhecimento adquirido aqui.
Lembrando que infelizmente não existe fórmula para fazer um bom desenho, o negocio é ir fazendo aos poucos e ajustando da forma que ficar legal, praticando bastante voce jaja irá conseguir fazer algo parecido com aquela garotinha pulando.
Por fim espero que tenham gostado, e principalmente espero seus comentários, pedidos, criticas e sugestões, além claro, de dicas caso tenha alguma! :D Muito obrigado pelo seu tempo, se você leu até aqui, e até o próximo post.
Me avisem se vocês querem um segundo post sobre esse tema, mostrando como fazer desenhos mais complexos ! :D
