Batman-Comic.CSS

¡Crea tus propias tiras cómicas de Batman y Robin con unas pocas etiquetas de HTML y la biblioteca de batman-comic.css!

Introducción

batman-comic.css es una biblioteca de clases de utilidad que permite create fácilmente comics con Batman y Robin. Cada personaje es un <div> que tiene las clases apropiadas para mostrar el personaje y personalizar sus expresiones faciales.

Tabla de Contenidos

  1. Introducción
  2. Personajes
  3. Expresiones Faciales
  4. Bocadillos de Texto
  5. Tamaño y Posiciones
  6. Props
  7. Paneles
  8. "Buenas Prácticas"
  9. Ejemplos
  10. Colaboraciones

Personajes

Batman

<div class="batman"></div>
batman
batman boca-hablar ojos-pensar
batman boca-redonda ojos-sospecha
batman boca-triste ojos-triste
batman boca-no ojos-sorpresa sonrojo
batman boca-suspiro ojos-shock verguenza
batman boca-triste boca-derecha ojos-enfado
batman boca-a-izquierda boca-triste ojos-duda rotar-cabeza-derecha

Props

Los colores del personaje pueden cambiarse usando las siguientes variables CSS:

  • --piel-color: #fca (rosa)
  • --boca-color: #700 (rojo oscuro)
  • --traje-color: #333 (gris)
  • --traje-color-oscuro: #222 (gris oscuro)
  • --logo-color: #ff5 (amarillo)
  • --logo-color-oscuro: #dd2 (amarillo oscuro)
  • --ojo-color: #fff (blanco)

Robin

<div class="robin"></div>
robin
robin boca-hablar ojos-pensar
robin boca-redonda ojos-sospecha
robin boca-triste ojos-triste
robin boca-suspiro ojos-sorpresa
robin boca-no ojos-shock verguenza
robin boca-triste boca-derecha ojos-enfado
robin boca-a-izquierda boca-triste ojos-duda rotate-head-right

Expresiones faciales

Todos los personajes tienen estas expresiones disponibles. Añade la clase para ver cómo cambian sus caras.

Ojos

Boca

Otros


Bocadillos

Los bocadillos son secciones donde se pone lo que dicen los personajes. En este caso, son bastante simples, y solo cuentan con el texto y un rabillo que apunta al personaje que habló.

<div class="bocadillo">¡Santo criterio interplanetario, Batman!<div>

Tamaño

Para el tamaño de los bocadillos, ver la siguiente sección. Pero, para el tamaño del rabillo del bocadillo, puedes usar las siguientes clases:

Posicionamiento

El rabillo de los bocadillos va a venir por defecto desde la derecha, si quieres que venga desde la izquierda, añade la clase izquierda... fácil, ¡no?

Para mover el rabillo a un lado u a otro, usaremos un sistema de clases similar a de la posición horizontal, pero indicando que es sólo para la línea. Por ejemplo, pos-linea-30 hará que el rabillo se posicione al 30% del bocadillo.

Para ver el posicionamiento de los bocadillos, ver siguiente sección.

Fuera de panel

Un bocadillo puede venir de fuera de la viñeta si la dice un personaje que no se vea en ese momento. En ese caso, añade la clase fuera.


Tamaños y Posiciones

Hay una serie de clases que puede ponerse en cualquier elemento. Estas clases determinan la posición y tamaño del elemento.

Tamaños

En este momento, sólo se puede especificar el ancho del elemento y aplicará principalmente a los bocadillos de texto. Las clases seguirán el formato .ancho-[CANTIDAD] donde [CANTIDAD] es un múltiplo de 5:

Posiciones

La posición se puede especificar de forma horizontal y vertical con una serie de clases que tienen la estructura .pos-[DIRECCIÓN]-[CANTIDAD]:

Los personajes se posicionan automáticamente en la parte baja de la viñeta/panel, por lo que generalmente sólo hará falta especificar su posición horizontal.

Por ejemplo, si queremos posicionar a Batman en el centro de la viñeta, tendremos este código (50 porque el centro es el 50%):

<div class="batman pos-x-50"></div>

Rotaciones

Como parte del comic se permite rotar elementos usando estas clases genéricas (aplican a personajes y props):


Props

Aún no se han añadido elementos adicionales a la biblioteca.


Paneles/Viñetas

Por defecto el cómic va a tener tres viñetas por file, cada una ocupando una columna, each panel taking a column within the row. Pero puedes cambiar esto con las clases dos, tres or cuatro que harán que la viñeta ocupe dos, tres o cuatro columnas respectivamente.

También puedes añadir la clase cuatro-paneles al contenedor del cómic para tener cuatro paneles por fila (serán más pequeños, igual que los personajes).


"Buenas Práticas"

Esto es un cómic dibujado con CSS. ¡Diviértete! Esa es la mejor práctica para un proyecto de este tipo.


Ejemplos

Ejemplo 1

¡Hola, soy Batman! Lucho contra el crimen y...
¡Hey! ¿Alguien ha visto a Bruce Wayne?
Debo irme... Por nada en concreto...
Ver código del cómic
<article class="batman-comic">
<section>
  <div class="bocadillo pos-x-60 pos-y-5 ancho-70 short">¡Hola, soy Batman! Lucho contra el crimen y...</div>
  <div class="batman"></div>
</section>
<section>
  <div class="bocadillo pos-x-50 pos-y-5 ancho-90 fuera izquierda corto">¡Hey! ¿Alguien ha visto a Bruce Wayne?</div>
  <div class="batman sonrojo boca-no ojos-sorpresa"></div>
</section>
<section>
  <div class="bocadillo pos-x-75 pos-y-5 pos-linea-55 ancho-70">Debo irme... Por nada en concreto...</div>
  <div class="batman sonrojo boca-a-izquierda boca-izquierda boca-redonda ojos-duda"></div>
</section>
</article>

Ejemplo 2

¡¡Robin!!
¡¿Pusiste tu camiseta roja en la lavadora con mi traje?!
Ver código del cómic
<article class="batman-comic">
  <style>
  .batman {
    --traje-color: #dFa0aB;
    --traje-color-oscuro: #cF909B;
    --logo-color: #ff5;
    --logo-color-dark: #dd2;
  }
  </style>
  <section class='tres' id="example-2">
    <div class="bocadillo pos-x-50 pos-y-10 pos-linea-70 ancho-70 izquierda" style="font-weight: bolder; font-size: 2em;">¡¿Pusiste tu camiseta roja en la lavadora con mi traje?!</div>
    <div class="batman pos-x-80 boca-enfado ojos-enfado"></div>
  </section>
</article>

Colaboraciones

Puedes usar la biblioteca batman-comic.css para crear comics sin fines comerciales. Si creas una tira cómica, por favor, compártela comigo. Puedes encontrarme en Twitter o Mastodon.