Curiosa figura creada por GenteGeek donde se emula a uno de los bichitos de Space Invaders, pero lo más original es que está creado en HTML y CSS, el código es el siguiente:
Código HTML (space_invaders.html):
-
<!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» xml:lang=»ca» lang=»ca»>
-
<head>
-
<title>HTML + CSS Space Invaders</title>
-
<link href=»space_invaders.css» rel=»stylesheet» type=»text/css» />
-
</head>
-
<body>
-
<div id=»cuerpo»> </div>
-
<div id=»cuerpo2″> </div>
-
<div id=»ojo1″> </div>
-
<div id=»ojo2″> </div>
-
<div id=»antena11″> </div>
-
<div id=»antena12″> </div>
-
<div id=»antena21″> </div>
-
<div id=»antena22″> </div>
-
<div id=»pata11″> </div>
-
<div id=»pata12″> </div>
-
<div id=»pata21″> </div>
-
<div id=»pata22″> </div>
-
<div id=»mano1″> </div>
-
<div id=»mano2″> </div>
-
</body>
-
</html>
Código CSS (space_invaders.css):
-
div {background-color: #000;}
-
-
#cuerpo {position:absolute; width:400px; height:200px; top:100px; left:200px; }
-
#cuerpo2 {position:absolute; width:500px; height: 130px; top: 170px; left: 150px; }
-
-
#ojo1 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:250px; }
-
#ojo2 {background-color: #fff; position:absolute; width:50px; height:50px; top:170px; left:500px; }
-
-
#antena11 {position:absolute; width:50px; height:50px; top:50px; left:250px; }
-
#antena12 {position:absolute; width:50px; height:50px; top:0px; left:200px; }
-
-
#antena21 {position:absolute; width:50px; height:50px; top:50px; left:500px; }
-
#antena22 {position:absolute; width:50px; height:50px; top:0px; left:550px;}
-
-
#pata11 {position:absolute; width:50px; height:50px; top:300px; left:200px;}
-
#pata12 {position:absolute; width:50px; height:50px; top:350px; left:150px;}
-
-
#pata21 {position:absolute; width:50px; height:50px; top:300px; left:550px;}
-
#pata22 {position:absolute; width:50px; height:50px; top:350px; left:600px;}
-
-
#mano1 {position:absolute; width:50px; height:200px; top:50px; left:100px;}
-
#mano2 {position:absolute; width:50px; height:200px; top:50px; left:650px;}
Pueden ver un ejemplo en GenteGeek