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.

Personajes

<div class="batman"></div>

<div class="robin"></div>

Expresiones faciales

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

Ojos

• ojos-no: Sin ojos.
• ojos-pensar: Ojos cerrados por arriba (un poco).
• ojos-duda: Ojos cerrados un poco por arriba y por abajo.
• ojos-triste: Ojos de tristeza (cortados hacia adentro).
• ojos-enfado: Ojos de enfado (cortados hacia afuera).
• ojos-sospecha: El ojo izquierdo es de pensamiento, el ojo derecho es de enfado.
• ojos-sorpresa (combinable): ojos más grandes.
• ojos-shock (combinable): el ojo izquierdo más pequeño que el ojo derecho.

Boca

• boca-no: Sin boca.
• boca-triste: Boca de tristeza (hacia abajo).
• boca-enfado: ver boca-triste.
• boca-hablar: Boca medio abierta hacia abajo.
• boca-redonda: un círculo
• boca-suspiro: un óvalo pequeño
• boca-derecha (combinable): la boca se posiciona un poco a la derecha.
• boca-izquierda (combinable): la boca se posiciona un poco a la izquierda.
• boca-a-derecha (combinable): recorta la boca un poco hacia la derecha.
• boca-a-izquierda (combinable): recorta la boca un poco hacia la izquierda.

Otros

• sonrojo: La parte central de la cara se mostrará un poco más roja.
• susto: La parte superior de la cara se verá un poco azul.
• verguenza: similar a sonrojo, pero la intensidad del rojo es más suave (no necesariamente).

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:

• bajo: una línea más pequeña
• alto: una línea más larga

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:

• .ancho-0 : un ancho del 0%.
• .ancho-5 : un ancho del 5%.
• .ancho-10 : un ancho del 10%.
• .ancho-15 : un ancho del 15%.
• .ancho-20 : un ancho del 20%.
• .ancho-25 : un ancho del 25%.
• .ancho-30 : un ancho del 30%.
• .ancho-35 : un ancho del 35%.
• .ancho-40 : un ancho del 40%.
• .ancho-45 : un ancho del 45%.
• .ancho-50 : un ancho del 50%.
• .ancho-55 : un ancho del 55%.
• .ancho-60 : un ancho del 60%.
• .ancho-65 : un ancho del 65%.
• .ancho-70 : un ancho del 70%.
• .ancho-75 : un ancho del 75%.
• .ancho-80 : un ancho del 80%.
• .ancho-85 : un ancho del 85%.
• .ancho-90 : un ancho del 90%.
• .ancho-95 : un ancho del 95%.
• .ancho-100: un ancho del 100%.

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]:

• El valor de [DIRECCIÓN] será x o y para posicionamiento horizontal y vertical respectivamente.
• El valor de [CANTIDAD] serán múltiplos de 5 que se corresponderan con el porcentaje (horizontal o vertical) a aplicar al elemento.

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):

• .rotar-0 : no rota el elemento (realmente no hace falta añadir nada).
• .rotar-5 : rota el elemento 5 grados en la dirección de las agujas del reloj.
• .rotar-10 : rota el elemento 10 grados en la dirección de las agujas del reloj.
• .rotar-15 : rota el elemento 15 grados en la dirección de las agujas del reloj.
• .rotar-20 : rota el elemento 20 grados en la dirección de las agujas del reloj.
• .rotar-25 : rota el elemento 25 grados en la dirección de las agujas del reloj.
• .rotar-30 : rota el elemento 30 grados en la dirección de las agujas del reloj.
• .rotar--5 : rota el elemento 5 grados en dirección contraria a las agujas del reloj.
• .rotar--10: rota el elemento 10 grados en dirección contraria a las agujas del reloj.
• .rotar--15: rota el elemento 15 grados en dirección contraria a las agujas del reloj.
• .rotar--20: rota el elemento 20 grados en dirección contraria a las agujas del reloj.
• .rotar--25: rota el elemento 25 grados en dirección contraria a las agujas del reloj.
• .rotar--30: rota el elemento 30 grados en dirección contraria a las agujas del reloj.

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

<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

<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.