{"componentChunkName":"component---src-templates-single-template-tsx","path":"/criando-a-bandeira-do-brasil-apenas-com-css","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Olá terráqueo, como vai?

\n

Recentemente eu contribui com um projeto chamado Flags-in-CSS enviando a bandeira do Brasil pra coleção.

\n

Eu vou demonstrar nesse artigo como eu criei ela usando apenas com CSS

\n

O Retângulo verde

\n

Isso é muito simples. Primeiro criei uma div com a classe .brasil-flag, por enquanto vazia.

\n
<div class=\"brasil-flag\">\n  <!-- empty -->\n</div>
\n

E no CSS eu apliquei o seguinte código:

\n
.brasil-flag {\n  position: relative;\n  background-color: #16b83e;\n  width: 250px;\n  height: 150px;\n}
\n

Com isso nós temos o retângulo verde da bandeira.

\n

O Losango amarelo

\n

Logo dentro da div nós criaremos mais uma div com a classe .losangue, mais ou menos assim:

\n
<div class=\"brasil-flag\">\n  <div class=\"losangue\"></div>\n</div>
\n

E no CSS eu apliquei o seguinte código:

\n
.brasil-flag .losangue:before,\n.brasil-flag .losangue:after {\n  position: absolute;\n}\n\n.brasil-flag .losangue {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.brasil-flag .losangue:before,\n.brasil-flag .losangue:after {\n  content: '';\n  width: 0;\n  height: 0;\n  left: 20px;\n  right: 20px;\n}\n\n.brasil-flag .losangue:before {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-bottom: 65px solid #ffe11f;\n  top: 10px;\n}\n\n.brasil-flag .losangue:after {\n  border-left: 105px solid transparent;\n  border-right: 105px solid transparent;\n  border-top: 65px solid #ffe11f;\n  bottom: 10px;\n}
\n

Já conseguimos ver o losango amarelo da bandeira.

\n

O Círculo azul

\n

Logo após vamos adicionar mais uma div com a classe .circle, mais ou menos assim:

\n
<div class=\"brasil-flag\">\n  <div class=\"losangue\"></div>\n  <div class=\"circle\"></div>\n</div>
\n
.brasil-flag .circle {\n  overflow: hidden;\n  z-index: 2;\n  display: block;\n  background-color: #1651b8;\n  height: 80px;\n  width: 80px;\n  margin-top: -40px;\n  margin-left: -40px;\n\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  border-radius: 50%;\n  -webkit-border-radius: 50%;\n  -moz-border-radius: 50%;\n}
\n

Isso já nos trás o círculo azul da bandeira.

\n

A faixa branca

\n

Ainda utilizando a classe .circle vamos criar a faixa branca da bandeira.

\n
.brasil-flag .circle,\n.brasil-flag .circle:before,\n.brasil-flag .circle:after {\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  border-radius: 50%;\n  -webkit-border-radius: 50%;\n  -moz-border-radius: 50%;\n}\n\n.brasil-flag .circle:before,\n.brasil-flag .circle:after {\n  width: 90px;\n  height: 40px;\n  -ms-transform: rotate(14deg);\n  -webkit-transform: rotate(14deg);\n  transform: rotate(14deg);\n}\n\n.brasil-flag .circle:before {\n  z-index: 3;\n  content: '';\n  margin-top: -20px;\n  margin-left: -45px;\n  background: #fff;\n}\n\n.brasil-flag .circle:after {\n  z-index: 4;\n  content: '';\n  margin-top: -10px;\n  margin-left: -48px;\n  background-color: #1651b8;\n}
\n

O resultado final

\n

\"Bandeira

\n

Ainda falta fazer as estrelas que, ao aceitar o meu pull request, o Christopher Pattle perguntou se não seria legal coloca-las, bem... Eu estou pensando ainda se coloco. :D

\n

/end

","excerpt":"Olá terráqueo, como vai? Recentemente eu contribui com um projeto chamado Flags-in-CSS enviando a bandeira do Brasil pra coleção. Eu vou demonstrar…","timeToRead":2,"frontmatter":{"category":["css"],"date":"há 11 anos","datePublished":"2016-01-23T00:00:00.000Z","description":"Hoje eu vou demonstrar nesse artigo como eu criei a bandeira do Brasil usando apenas com CSS","path":"/criando-a-bandeira-do-brasil-apenas-com-css","tags":["css","css3","html"],"title":"Criando a bandeira do Brasil 🇧🇷 apenas com CSS","image":{"publicURL":"/static/bandeira-do-brasil-com-css-1145832a30b787961d7ed3a0bbe7c384.png","name":"bandeira-do-brasil-com-css"}},"fields":{"readingTime":{"words":408}}}},"pageContext":{}}}