Pixel art Css con box-shadow y Html semántico. Mario Bros en puro Css

Pixel art Css con box-shadow y Html semántico. Mario Bros en puro Css

Por Kseso ✎ 4

La propiedad box-shadow pertenece al grupo de las que podríamos llamar "propiedades para jugones".
Recuerda, o mira el enlace, que admite múltiples valores y en cada valor se puede actuar hasta sobre 6 variable de la sombra.
Normalmente los juegos o ejemplos que suelen verse se basan en un uso de casi todas esas variables. Pero también es posible sorprender haciendo lo contrario: declarando el mínimo en cada valor.

Y el mínimo es declarar sólo el desplazamiento (offset) horizontal y vertical. Pues te recuerdo que la especificación indica que si no se declara el color de la sombra, toma el valor de la propiedad "color" del elemento (ya sea por tenerla declarada o por herencia)

El base a lo anterior es muy sencillo dibujar con píxeles (pixel art) utilizando un sólo elemento en el html y dejando al Css el resto. Tomemos por ejemplo el siguiente código:

#pixel { width: 10px; height: 10px; background: red; box-shadow: 20px 0, 40px 0, 60px 0; } <div id="pixel"></div>

El resultado sería el siguiente:

Donde el primer cuadradito rojo es el elemento y los otros tres son sus sombras. Si te fijas, hay una relación entre el tamaño del elemento y los valores de posicionamiento de la sombra

Nota: En los ejemplos no se utilizan prefijos privativos para la propiedad box-shadow.

Pixel art con box-shadow Css

Ya tenemos la forma de lograr dibujos al pixel. Ahora sólo es cuestión de elegir modelo y declarar la sombra con los valores apropiados.

Space invaders Css

Un ejemplo, reconocible por quienes se dejaran la paga en rondas de 5 duros o 25 ptas. en las viejas "maquinitas de marcianos"

Su marcado html no puede ser más sencillo:

<ul id="invader"> <li class="uno"></li> <li class="dos"></li> <li class="tres"></li> </ul>

Y los estilos del primer "marcianito":

ul#invader { list-style-type: none; width: 370px; height: 110px; margin: 20px auto; background: #000; position: relative; } #invader .uno{ position: absolute; left: 0; top: 10px; width: 10px; height: 10px; background: transparent; color: #ff0; box-shadow: 20px 0px, 100px 0px, 30px 10px, 90px 10px, 40px 20px, 80px 20px, 30px 30px, 40px 30px, 50px 30px, 60px 30px, 70px 30px, 80px 30px,90px 30px, 20px 40px, 30px 40px, 60px 40px, 90px 40px, 100px 40px, 10px 50px, 20px 50px, 30px 50px, 40px 50px, 50px 50px, 60px 50px, 70px 50px, 80px 50px, 90px 50px, 100px 50px, 110px 50px, 10px 60px, 30px 60px, 40px 60px, 50px 60px, 60px 60px, 70px 60px, 80px 60px, 90px 60px, 110px 60px, 10px 70px, 30px 70px, 90px 70px,110px 70px, 10px 80px, 40px 80px, 50px 80px, 70px 80px, 80px 80px, 110px 80px; }

Css Pixel art en colores y escalable

En los ejemplos anteriores el tamaño y posiciones de las sombras está definidos en píxeles y el color, como decía, lo hereda de la propiedad "color" del div que las genera.

Pero nada nos impide utilizar la unidad em en el tamaño (anchura y altura) del elemento y en los valores de box-shadow.
Al cambiar el valor de font-size lograremos cambiar el tamaño todo el dibujo logrado manteniendo las proporciones.
Y utilizando diferentes colores en cada valor de la sombra bordaremos el dibujo. Tal que así:

Mario Bros semántico en puro Css

See the Pen Css Pixel art: Semantic & scalable Mario Bros by Kseso (@Kseso) on CodePen.

El marcado html del grupo central de Marios antes de la repetición es el de abajo:

<div class="mario uno"><div></div></div> <div class="mario dos"><div></div></div> <div class="mario tres"><div></div></div> <div class="mario cuatro"><div></div></div> <div class="mario cinco"><div></div></div>

La clase añadida (.uno | .dos ! .tres | .cuatro | .cinco) es la que controla el tamaño final del dibujo al aumentar el tamaño de la fuente:

.mario { background: #FEE45D; border: 1em solid #EAA115; margin: 0 1px; position: relative; float: left; width: 23em; height: 34em; } .uno {font-size: 1px;} .dos {font-size: 2px;} .tres {font-size: 3px;} .cuatro {font-size: 4px;} .cinco {font-size: 5px;} .mario div { font-size: 1em; position: absolute; left: 0; top: 1em; width: 1em; height: 1em; background: transparent; box-shadow: /*ver código fuente */ }

Por si has llegado hasta aquí con un navegador que no maneja css, esto es lo que te pierdes, en imagen:

Bug en Safari

Me encontré con un bug del navegador Safari por comentarios de @polmoneys en twitter. Mira:

See the Pen Safari bug in box-shadow without color value by Kseso (@Kseso) on CodePen.

Bonus: confeti Css

Con esta forma de utilizar box-shadow también puedes obtener un montón de bonito confeti.
Sólo tienes que aplicar el oportuno border-radius

Bonus 2

Si eres de los que prefiere usar el ratón en vez de picar código en un editor de texto, aquí tienes una aplicación en línea para que puedas hacer tus propios pixel art.

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 Don Kseso Kseso

Comentarios: 4

  1. Les comparto un ejercicio basado en este articulo, agregue un par de animaciones :)
    http://codepen.io/mapacheweb/pen/MaBbPj

    ResponderEliminar
    Respuestas
    1. A ese pen le faltan ceros.

      Eliminar
    2. Perdón, sí faltan ceros y algo más, pero los navegadores igual interpretan las sombras. El problema por el que no lo veía es porque le sobra una coma a los últmos valores de box-shadow.

      Eliminar
  2. Están bien las transiciones, Alejandro Gracias por compartirla.
    Posíblemente yo en 2015 le declararía a la caja padre la propiedad color y en box-shadow utilizaría el valor currentColor
    Eso facilitaría poder cambiar de color las demos.
    Pero sólo es una idea.

    Aquí el pen que comparte Alejandro embutido para evitar tener que copiar y pegar el enlace:

    [pen]data-height="400" data-theme-id="299" data-slug-hash="MaBbPj" data-default-tab="result" data-user="mapacheweb" class='codepen'[/pen]

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap