Voltar para o site

Border Art

Publicado em: 02/04/2005
Atualizações: 05/06/2020

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: https://www.tanfa.co.uk/css/borders/ukflag.asp (Esse site atualmente pertence a uma Igreja Luterana)

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" https://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://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 
https://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®

Ir para a página de entrada nos sites dos livros.

topo