A um tempinho atrás eu estava estudando CSS e resolvi fazer alguns desenhos, é interessante o que podemos fazer com isso. Não sei muito até que ponto é útil na montagem mas ajuda a aprender um monte de Sintaxes.
Nos links:
http://www.maujor.com/
http://imasters.uol.com.br/
Você pode aprender algumas manhas do css.
Eu fiz a bandeira do Brasil em css é um pouco trabalhoso, veja como ficou:
Eu achei bandeira Britânica também, você pode copiar o código se quiser:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>UK Flag</title>
<style type="text/css">
#mywrapper { /* DIV conteudo c/ borda cinza */
position:relative;
width:454px;
height:254px;
border:5px solid #eee;
}
#flag, [dummy] { /* Container para a bandeira,
dentro
#mywrapper com borda branca /*
/* o 'seletor' [dummy] em seletores agrupados
esconde a regra CSS do IE/Win,inclusive
IE6.0, obrigado a Sascha Claus em
http://w3development.de/css/
hide_css_from_browsers/more/ */
position:absolute;
width:450px;
height:250px;
top:0;
left:0;
background:#be0027;
border:2px solid #fff;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#nw, #ne, #se, #sw, [dummy] {
/* Quatro DIVs dentro da #flag */
width:200px;
height:100px;
background:#be0027;
position:absolute;
border-style:solid;
border-color:#fff;
}
#nw {
left:0;
top:0;
border-width: 0 10px 10px 0;
}
#ne {
right:0;
top:0;
border-width: 0 0 10px 10px;
}
#se {
right:0;
bottom:0;
border-width: 10px 0 0 10px;
}
#sw {
left:0;
bottom:0;
border-width: 10px 10px 0 0;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* Cada DIV acima eh container para 04 o
utras DIVs */ /* Assim #nw-lb2 = segunda
(mais alta) DIV no canto
esquerdo e abaixo da #nw */
#nw-lb1, #nw-lb2, #nw-rt1, #nw-rt2,
#ne-rb1, #ne-rb2, #ne-lt1, #ne-lt2,
#se-lb1, #se-lb2, #se-rt1, #se-rt2,
#sw-rb1, #sw-rb2, #sw-lt1, #sw-lt2, [dummy] {
position:absolute;
width:0;
height:0;
border-color:transparent;
border-style:solid;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#nw-lb1, #nw-lb2, #se-lb1, #se-lb2 {
left:0;
bottom:0;
}
#nw-rt1, #nw-rt2, #se-rt1, #se-rt2 {
right:0;
top:0;
}
#ne-lt1, #ne-lt2, #sw-lt1, #sw-lt2 {
left:0;
top:0;
}
#ne-rb1, #ne-rb2, #sw-rb1, #sw-rb2 {
right:0;
bottom:0;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#nw-lb1 {
border-width:0 170px 85px 0;
border-bottom-color:#fff;
}
#nw-lb2 {
border-width:0 140px 70px 0;
border-bottom-color:#3b5aa3;
}
#nw-rt1 {
border-width:0 180px 90px 0;
border-right-color:#fff;
}
#nw-rt2 {
border-width:0 160px 80px 0;
border-right-color:#3b5aa3;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#ne-rb1 {
border-width:85px 170px 0 0;
border-right-color:#fff;
}
#ne-rb2 {
border-width:70px 140px 0 0;
border-right-color:#3b5aa3;
}
#ne-lt1 {
border-width:90px 180px 0 0;
border-top-color:#fff;
}
#ne-lt2 {
border-width:80px 160px 0 0;
border-top-color:#3b5aa3;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#se-lb1 {
border-width:0 180px 90px 0;
border-bottom-color:#fff;
}
#se-lb2 {
border-width:0 160px 80px 0;
border-bottom-color:#3b5aa3;
}
#se-rt1 {
border-width:0 170px 85px 0;
border-right-color:#fff;
}
#se-rt2 {
border-width:0 140px 70px 0;
border-right-color:#3b5aa3;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#sw-rb1 {
border-width:90px 180px 0 0;
border-right-color:#fff;
}
#sw-rb2 {
border-width:80px 160px 0 0;
border-right-color:#3b5aa3;
}
#sw-lt1 {
border-width:85px 170px 0 0;
border-top-color:#fff;
}
#sw-lt2 {
border-width:70px 140px 0 0;
border-top-color:#3b5aa3;
}
</style>
</head>
<body>
<div id="mywrapper">
<div id="flag">
<!-- Comeca NW -->
<div id="nw">
<!-- NW esquerda-baixo_1 -->
<div id="nw-lb1">
</div>
<!-- NW esquerda-baixo_2 -->
<div id="nw-lb2">
</div>
<!-- NW direita-alto_1 -->
<div id="nw-rt1">
</div>
<!-- NW direita-alto_2 -->
<div id="nw-rt2">
</div>
</div><!-- Fim NW -->
<!-- Comeca NE -->
<div id="ne">
<!-- NE direita-baixo_1 -->
<div id="ne-rb1">
</div>
<!-- NE direita-baixo_2 -->
<div id="ne-rb2">
</div>
<!-- NE esquerda-alto_1 -->
<div id="ne-lt1" >
</div>
<!-- NE esquerda-alto_2 -->
<div id="ne-lt2" >
</div>
</div><!-- here ends NE -->
<!-- Comeca SE -->
<div id="se">
<!-- SE esquerda-baixo_1 -->
<div id="se-lb1">
</div>
<!-- SE esquerda-baixo_2 -->
<div id="se-lb2">
</div>
<!-- SE direita-alto_1 -->
<div id="se-rt1">
</div>
<!-- SE direita-alto_2 -->
<div id="se-rt2">
</div>
</div><!-- Fim SE -->
<!-- Comeca SW -->
<div id="sw">
<!-- SW direita-baixo_1 -->
<div id="sw-rb1">
</div>
<!-- SW direita-baixo_2 -->
<div id="sw-rb2">
</div>
<!-- SW esquerda-alto_1 -->
<div id="sw-lt1">
</div>
<!-- SW esquerda-alto_2 -->
<div id="sw-lt2">
</div>
</div><!-- Fim SW -->
</div><!-- Fim FLAG -->
</div>
<!-- Fim MYWRAPPER -->
Fonte:http://www.maujor.com/tutorial/ukflag.php
</body>
</html> |
