Border Art
Publicado em: 02/04/2005Atualizaçõ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:
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ã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.
