Banner propaganda da DevMedia - Cursos de desenvolvimento web

Border Art

Publicado em: 02/04/2005

Sobre este trabalho com CSS

A bandeira Britânica, visualizável em browsers conforme com as Web Standards não é uma <img> do tipo jpg, gif, png, etc...!
Ela foi desenhada em 10 de janeiro de 2005, com CSS, usando-se a propriedade border e construida com a finalidade de ser submetida para publicação em um desafio de um site inglês.

O "desenho" foi aprovado e está publicado em: http://www.tanfa.co.uk/css/borders/ukflag.asp

Construi também um relógio digital com CSS e sem imagens.

Sorry! IE make a mistake with the CSS ruler
border-color: transparent and displays it "black" :-(
Swap to a standard-compliant browser and see the beautiful UK Flag.

Lamento! O Internet Explorer não reconhece a regra CSS border-color: transparent. Para visualizar a bandeira da Inglaterra use um browser em conformidade com as Web Standards.

Para usuários do IE

O Internet Explorer não reconhece a regra CSS border-color: transparent usada neste trabalho e em consequência não consegue renderizar apropriadamente a bandeira, por isso forneço a seguir um "screenshoot" em tamanho reduzido.

Screenshot para usuários do IE:

UK Flag

O código para criar a bandeira

Caso você pretenda estudar, forneço a seguir o código completo para uma página contendo a bandeira, para você copiar colar. :-)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Strict//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">

<p>Lamento! O Internet Explorer n&atilde;o 
reconhece a regra CSS 
<strong>border-color: transparent. 
</strong> Para visualizar a bandeira 
da Inglaterra use um browser em conformidade 
com as Web Standards.
</p> <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 -->
</body>
</html>

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo