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):
|
1 2 3 4 5 6 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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 :)
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.
Recent Posts
- Root3D, the CSS3D environment
- RS-JS, the post javascript meeting in Porto Alegre(only in Portuguese)
- RS-JS, the javascript meeting in Porto Alegre(only in Portuguese)
- Google abre 30 vagas de estágio em SP
- Mortal Kombat 9, list of fatalities – xbox360
Categories
- About me (1)
- Articles (62)
- Business (3)
- Cool Stuff (14)
- CSS (11)
- HTML5 (10)
- IDE (3)
- JavaScript (16)
- PHP (18)
- Events (22)
- Experiments (8)
- Projects (40)
- Botaoteca (1)
- BrazilJS (1)
- ChessMate (1)
- Desconferencia (1)
- Dojo-Poa (1)
- jfUnit (2)
- Mozilla (5)
- Personas (2)
- PHPDevBar (10)
- PowerPolygon (1)
- print_j (1)
- Root3D (1)
- theWebMind (16)
- Sem categoria (1)
- Talk to me (1)
Pingback: Criando uma página simples de forma elegante com CSS3: Font-face, CSS Transition e CSS animation | Bernard De Luna