Star Wars en el universo HTML (css, svg y un poco de js) 19.12.15

Star Wars en el universo HTML (css, svg y un poco de js)

Vale. Sí. Este es otro post recopilatorio de trabajos ajenos al estilo del que dediqué hace unas fechas a las Ilusiones ópticas puro Css.

Y el motivo es el mismo: disfrutar con la imaginación y destreza de sus autores para recrear con puro CSS y HTML (en algunos casos apoyados en herramientas para su manejo, que después salen los +papistas) aspectos del universo de Star Wars o Guerra de la Galaxia.

En otros trabajos sus autores recurren a una pizca de Js para darle un plus en vistosidad o funcionamiento.

Desde su iconográfica intro, pasando por cascos, personajes, naves, sables... nada queda a salvo de su recreación.

Pero en un trabajo de este tipo es obligado comenzar por la que recuerdo y creo que fue la primera. Nos tenemos que remontar nada menos que al año 2012. Craig Buckler nos sorprendía a todos en el blog de Sitepoint.com con su realización Star Wars 3D Scrolling Text in CSS3.

Para no sobrecargar la página ni aumentar innecesariamente el tráfico de datos aprovecho la "nueva" funcionalidad de codepen "Use Click-To-Play Preview Before Loading". Esto es, los pens no se cargan hasta que no pulses en cada uno de ellos para verlos.

Star Wars 3D Scrolling Text in CSS3 por Craig Buckler

See the Pen adNXvJ by Kseso (@Kseso) on CodePen.

Star Wars opening crawl from 1977 por Tim Pietrusky

Poco después, Mayo de 2013, Tim Pietrusky realizó la siguiente intro con la banda sonora incluida (utilizando js para sincronizar la música con el desplazamiento del texto).

See the Pen Star Wars opening crawl from 1977 by Tim Pietrusky (@TimPietrusky) on CodePen.

Star Wars: The Force Awakens in CSS por Donovan Hutchinson

Otra recreación de la intro. En este caso apoyada en js por las razones que su autor explica en el propio pen (pestaña js).

See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.

Spoiler Revealer por Priyajot Syan

Pero toda peli que se precie ha de tener sus fans, haters y spoilers.

See the Pen Spoiler Revealer by Priyajot Syan (@syanshammi) on CodePen.

Star Wars Menu Icon por Adam Dorling

Dejemos atrás la intro y vayamos con algunos de sus personajes. Y para abrir esta parte quién quiere un Hamburguer menu pudiendo tener un Menú de sables laser.

See the Pen Star Wars Menu Icon by Adam Dorling (@Naito) on CodePen.

Star Wars Rebels Radial Nav por TJ Rogers

See the Pen Radial Menu UI by TJ Rogers (@tj-rogers) on CodePen.

StarWars Pixel Stormtrooper Moonwalk por Yusuf Bakır

Stormtrooper haciendo el moonwalker gracias a su sombra (box-shadow)

See the Pen StarWars Pixel Stormtrooper Moonwalk by Yusuf Bakır (@yusufbkr) on CodePen.

Stormtroopers por HermineF

See the Pen Stormtroopers by HermineF (@HermineF) on CodePen.

Flat Star Wars por Kevin Jannis

See the Pen Flat Star Wars by Kevin Jannis (@kevinjannis) on CodePen.

Star Wars Storm Trooper in pure CSS por Aleks

See the Pen Star Wars Storm Trooper in pure CSS by Aleks (@achudars) on CodePen.

Yoda y su control del SVG animado por Sépion

See the Pen SVG Star Wars animation by Sépion (@Sepion) on CodePen.

Parallax Image Layers - Star Wars por Vahid

Inclasificable.

See the Pen Parallax Image Layers - Star Wars by Vahid (@vahidseo) on CodePen.

CSS Animated Bio Card por Assaf Gelber

See the Pen CSS Animated Bio Card by Assaf Gelber (@agelber) on CodePen.

Saquemos a pasear los viejos y nuevos droids

R2D2 Notification por por Abhijit Hota

Para comenzar esta sección R2D2 tiene algo que decirte.

See the Pen R2D2 Notification by Abhijit Hota (@XDBoy018) on CodePen.

C3PO monoelemento por Kevin Lorenz

Simpática recreación de C3PO realizado con un sólo elemento en base al viejo conocido "pixel art" con box-shadow.

See the Pen CLDhg by Kevin Lorenz (@verpixelt) on CodePen.

R2D2 por Jonathan Preciado

See the Pen star war by jonathan preciado (@jonathan2222222222) on CodePen.

BB-8 por Apex Design Studio

De los viejos al nuevo BB-8. Cuando se tuvo conocimiento de este nuevo robot florecieron sus recreaciones. El primero que te muestro más parece gato siguiendo a tu puntero. Múevelo.

See the Pen BB-8 by Apex Design Studio (@apexdesignstudio) on CodePen.

BB-8 por Orçun Ilbeyli

See the Pen BB-8 by Orçun Ilbeyli (@nucro) on CodePen.

Estos 2 pens son sólo una muestra de todas las realizaciones de BB-8 que puedes encontrar en codepen.

Llegó el momento de la batalla cuerpo a cuerpo. Es hora de lucir sables.

Lightsaber con input type="range" por Noah Blon

Utilizar el puntero para regular la longitud del sable. Y no, no son moscas lo que oyes, es el laser.

See the Pen Lightsaber by Noah Blon (@noahblon) on CodePen.

Lightsaber with pure CSS por Ed Bond

See the Pen Lightsaber with pure CSS by Ed Bond (@edbond88) on CodePen.

Light Saber por Lewis Robinson

See the Pen Light Saber by Lewis Robinson (@lewisvrobinson) on CodePen.

Pure CSS3 Star Wars Lightsaber Checkboxes por Nicholas Cerminara

See the Pen Pure CSS3 Star Wars Lightsaber Checkboxes by Nicholas Cerminara (@ncerminara) on CodePen.

Star Wars: Attack of the DOM por Nicholas Cerminara

See the Pen Star Wars: Attack of the DOM by Nicholas Cerminara (@ncerminara) on CodePen.

Es hora de la caballería pesada. De entre todos los AT-AT posíblemente el que más eco tuvo por ser (creo) el primero realizado en CSS fue Pure CSS3 AT-AT Walker por Anthony Calzadilla. No he localizado copia en codepen.

CSS3 AT-AT por Trickeedickee

See the Pen CSS3 AT-AT by trickeedickee (@trickeedickee) on CodePen.

STtar wars AT-AT Walker por r4ms3s

See the Pen STAR WARS AT-AT Walker by r4ms3s (@r4ms3s) on CodePen.

AT-AT por Tim Pietrusky

Un poco de ASCII art, CSS y letteringjs.com para este destelleante AT-AT

See the Pen AT-AT by Tim Pietrusky (@TimPietrusky) on CodePen.

CSS AT-AT walking por keisuke Takahashi

See the Pen CSS AT-AT walking by keisuke Takahashi (@ksksoft) on CodePen.

Levantemos la altura del post. Pongámosle alas.

Si hablamos de naves espaciales y CSS es obligado mencionar al "editor" tridiv.com. Haz un poquito de scroll para acceder a su demo 'Xwing'.

Pure CSS Millenium Falcon por Todd Baert

See the Pen BucketOfBolts by Todd Baert (@toddbaert) on CodePen.

I don't know Chewie, fly casual! por Caohim

See the Pen I don't know Chewie, fly casual! by Caohim (@caohim) on CodePen.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso