Darth Vader y sable láser CSS

Hoy es el día de la Guerra de las Galaxias y para celebrarlo hemos creado un sable láser para que podáis disfrutar tanto del proceso como de la obra final

Día de la Guerra de las Galaxias

El 25 de mayo de 1977 se estrenó la primera película de la longeva saga de George Lucas, convirtiéndose más tarde en todo un universo para la multitud de fans comprometidos que hay alrededor del mundo. Pero, ¿por qué se celebra el 4 de mayo? La explicación a esto la tiene un periódico británico con la felicitación a la primera ministra Margaret Thatcher a través de este juego de palabras: “May the 4th Be With You, Maggie” (“Que el día cuatro te acompañe, Maggie”), haciendo referencia a la famosa frase de la saga: “May the Force be with you” (“Que la fuerza te acompañe”). Así, con la popularización de esta frase, se fijó finalmente el día 4 de mayo como el día de Star Wars.

Y después de esta anécdota, quiero enseñarte qué he desarrollado en Interactius para celebrar este día.

El sable láser CSS y el casco de Darth Vader

Aunque no voy a entrar en detalles sobre cómo se ha hecho técnicamente, explicaré un poco la estructura y las propiedades principales de CSS usadas:

• Contenedor “helmet” (casco de Darth Vader): Para las formas redondeadas he usado las propiedades border-radius aplicadas en cada esquina (por ejemplo border-top-left-radius), combinando los valores entre px y %. Para las formas más poligonales, como la cara o la boca, he usado la propiedad clip-path (p.e. clip-path:polygon(x y, x y, x y, x y)). Por último, he pintado el casco con la propiedad background: linear-gradient, superponiendo capas de gradientes.
• Contenedor “cont”: Contiene el sable láser y la máscara con el agujero por la que se ve a Darth Vader cuando se mueve el cursor. El sable está pintado con capas de background: linear-gradient. Todo el div “cont” tiene una propiedad z-index mayor que el casco, y el fondo es un gradiente circular (background: radial-gradient) de transparente a negro, que por el centro crea un efecto de agujero por el que se ve a Darth Vader.
• Efectos de sonido y movimiento del sable: Para realizar ambos efectos he usado jQuery y jQuery UI.

¿Queréis ver el código?

A continuación te dejo el código de Darth Vader y el sable láser en este codepen: lo encontrarás en las pestañas HTML, CSS y Javascript. El CSS está escrito en LESS, pero se puede ver el resultado compilado pulsando el botón inferior “View Compiled Code”.

Espero que hayas disfrutado de esta creación y…

¡Que la fuerza te acompañe!