Space Invaders en HTML + CSS
Publicado el 8/12/2007 por Juanguis y guardado en la categoría: Geek.
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
Comentarios (2)
Pero eso no vale, lo han hecho con posicionamiento absoluto!
Tendría más gracia si se usaran otras técnicas de posicionamiento…o hasta ¿un diseño líquido? o es demasiado locura?
Lo que está claro es que tendría mérito, sobretodo si fuera cross-browser.
9/12/2007 @ 01:39 pmAlex http://boozox.net
me hace acordar al Acid Test ^^
9/12/2007 @ 05:25 pmsunburn http://elsunburn.blogspot.com