Drawing the Brazilian flag using HTML5 and CSS3

5Jan/121

Drawing the Brazilian flag using HTML5 and CSS3

Hey there.
Playing around with CSS, I decided to create a Brazilian Flag based on divs.
Notice that I didn't apply that curve effect to the text neither added all the stars...I don't think it would be relevant to the experiment.

Here is the HTML structure I used(notice also that, there is no text in the HTML structure):

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div>

</div>

And here is the CSS source. As you can see, the text in the flag is written with CSS.

body>div{
    margin: 10px;
    background-color: green;
    width: 120px;
    height: 70px;
}
body>div>div:nth-child(1){
    position: relative;
    left: -60px;
    border-color: transparent yellow transparent transparent ;
    border-style: solid;
    border-width: 35px 60px;
}
body>div>div:nth-child(2){
    position: relative;
    left: 60px;
    top: -70px;
    border-color: transparent transparent transparent yellow;
    border-style: solid;
    border-width: 35px 60px;
}

body>div>div:nth-child(3){
    background-color: blue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: -130px;
}
body>div>div:nth-child(4):before{
    background-color: white;
    font-size: 6.4px;
    content: 'Ordem e Progresso';
    position: absolute;
    left: 45px;
    top: 40px;
    text-align: center;
    width: 50px;
}

body>div{

margin: 10px;

background-color: green;

width: 120px;

height: 70px;

}

body>div>div:nth-child(1){

position: relative;

left: -60px;

border-color: transparent yellow transparent transparent ;

border-style: solid;

border-width: 35px 60px;

}

body>div>div:nth-child(2){

position: relative;

left: 60px;

top: -70px;

border-color: transparent transparent transparent yellow;

border-style: solid;

border-width: 35px 60px;

}

body>div>div:nth-child(3){

background-color: blue;

width: 50px;

height: 50px;

border-radius: 50%;

margin: auto;

position: relative;

top: -130px;

}

body>div>div:nth-child(4):before{

background-color: white;

font-size: 6.4px;

content: 'Ordem e Progresso';

position: absolute;

left: 45px;

top: 40px;

text-align: center;

width: 50px;

}

Now, here you can see the final result :)

Posted by felipenmoura

Tagged as: css3, html5 Leave a comment

https://twitter.com/rasagy Rasagy Sharma

I loved the use of minimal markup here!
I made the Flag of India in CSS3: http://rasagy.in/blog/2012/01/indian-flag-in-css3-republic-day-india-special/Would love some feedback. :)
Pingback: Criando uma página simples de forma elegante com CSS3: Font-face, CSS Transition e CSS animation | Bernard De Luna

Nivolas Steno, the fossil theorist, receives a Doodle from Google » « PHPapo, PHP workshop(portuguese, only)

Follow me on twitter!
@felipenmoura

2012 acid3 addon apache2 Botaoteca Browsers Business CSS css3 database design Dojo dojopoa Environment Events felipe nascimento firefox FISL flisol funny games GIT google html5 IDEs IE9 JavaScript jfUnit jquery js labs Mind2.0 mozilla nerd/geek news Open Source PHP php developer toolbar Projects software livre theWebMind thoughts Tweety unit tests webkit

WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.

Este site está generosamente hospedado na RedeHost

felipenmoura.org Web development, HTML5, Javascript, CSS3, PHP and other cool stuff!

Drawing the Brazilian flag using HTML5 and CSS3

Posted by felipenmoura

Recent Posts

Categories