Batman-Comic.CSS

Create your own comics with just a few HTML tags, and the batman-comic.css file!

Introduction

batman-comic.css is a utility-class library that allows to easily create comics with Batman and Robin. Each character is a <div> that has the appropriate classes to show the character and their facial expressions.

Table of contents

  1. Introduction
  2. Characters
  3. Character Expressions
  4. Speech Bubbles
  5. Sizes and Positions
  6. Props
  7. Panels
  8. "Best Practices"
  9. Examples
  10. Collaborations

Characters

Batman

<div class="batman"></div>
batman
batman mouth-talk eyes-think
batman mouth-round eyes-suspicious
batman mouth-sad eyes-sad
batman mouth-whisper eyes-surprise blushing
batman mouth-no eyes-shock shame
batman mouth-to-right mouth-left mouth-sad eyes-angry
batman mouth-to-left mouth-sad eyes-doubt rotate-head-right

Custom Properties

You can modify the character colors by changing the following CSS variables:

  • --skin-color: #fca (pink-ish)
  • --mouth-color: #700 (dark red)
  • --suit-color: #333 (gray)
  • --suit-color-dark: #222 (dark gray)
  • --logo-color: #ff5 (yellow)
  • --logo-color-dark: #dd2 (dark yellow)
  • --eye-color: #fff (white)

Robin

<div class="robin"></div>
robin
robin mouth-talk eyes-think
robin mouth-round eyes-suspicious
robin mouth-sad eyes-sad
robin mouth-whisper eyes-surprise blushing
robin mouth-no eyes-shock shame
robin mouth-to-right mouth-left mouth-sad eyes-angry
robin mouth-to-left mouth-sad eyes-doubt rotate-head-right

Custom Properties

You can modify the character colors by changing the following CSS variables:

  • --skin-color: #fca (pink-ish)
  • --skin-color-dark: #da8 (dark pink-ish)
  • --mouth-color: #fff (white)
  • --suit-color: #f00 (red)
  • --shirt-color: #080 (green)
  • --cape-color: #ff5 (yellow-ish)
  • --logo-color: #ff5 (yellow-ish)
  • --logo-color-dark: #000 (black)
  • --eye-color: #fff (white)
  • --mask-color: #000 (black)
  • --hair-color: #000 (black)

Character Expressions

All characters have these expressions available, add the classes and see how their faces change.

Eyes

Mouth

Others


Sizes and Positions

There are a series of classes that will apply to any element. These classes determine position and size of the element.

Sizea

At this moment, you can only specify the width and an element, and it only applies to speech bubbles (you can use them on characters, but results may be disastrous). The class names will follow the pattern .width-[AMOUNT] where [AMOUNT] is a multiple of 5:

Positions

Positon must be specified using horitonzally and vertically with a series of classes that follow the pattern .pos-[DIRECTION]-[AMOUNT]:

By default, characters are positioned at the bottom part of the panel, so you won't need to specify the vertical position for them.

For example, if we want to place Batman at the center of the panel, we'll have to use the following code (50 being the center as it is 50%):

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

Rotations

You can use a set of generic classes to rotate elements withn certain limits (the rotations will apply to characters and props, too):


Speech Bubbles

Speech bubbles are sections to write what the characters are saying or thinking. In this version, they are quite simple, they are some text and a line connecting the text to the speaking chracter.

<div class="bubble">Holy Interplanetary Yardstick, Batman!<div>

Size

For speech bubbles sizes, check the previous section.

For the size of the line connecting the text with the character, there are a couple of classes that you could use to customize it:

Position

For speech bubbles positioning, check the previous section.

The line connecting text and character will right-to-left by default. If you want to change direction and make it left-to-right, just add the left class... easy, no?

To move the line from one side to the other, we will use a class system similar to the one for horizontal positioning described on the previous section, but indicating it is for hte line. For example, pos-line-30 will place the line at a 30% from the beginning of the speech bubble.

Off-panel Bubbles

Sometimes, we may want to have a speech bubble coming from a character located outside of the panel, that is not visible. In that case, add the off-panel class.


Props

No props added yet.


Panels

By default the comic strip is designed to have 3 panels per row, each panel taking a column within the row. But you can add classes to the

Add the classes two, three, or four to each panel so it spans two, three, or four columns respectively.

...But you can add the class four-panels to the comic strip so it will have four panels per row (they will be smaller, and the figures will be slightly scaled down.)


"Best Practices"

To be determined. Something something "best practices don't work" something something. Just have fun for now. That should definitely be a best practice for this type of projects.

But if you want a set of best practices; here are some:


Examples

Example 1

Hi, I'm Batman! I fight crime and...
Hey! Has anyone seen Bruce Wayne?
I must go... For no reason in particular...
View comic source code
<article class="batman-comic">
  <section>
    <div class="bubble pos-x-60 pos-y-5 width-70 short">Hi, I'm Batman! I fight crime and...</div>
    <div class="batman"></div>
  </section>
  <section>
    <div class="bubble pos-x-50 pos-y-5 width-90 off-panel left short">Hey! Has anyone seen Bruce Wayne?</div>
    <div class="batman blush mouth-no eyes-surprise"></div>
  </section>
  <section>
    <div class="bubble  pos-x-75 pos-y-5 pos-line-55 width-70">I must go... For no reason in particular...</div>
    <div class="batman blush mouth-to-left mouth-left mouth-round eyes-doubt"></div>
  </section>
</article>

Example 2

Robin!! Did you wash your red shirt with my suit again?!?!
View comic source code
<article class="batman-comic">
  <style>
    .batman {
      --suit-color: #dFa0aB;
      --suit-color-dark: #cF909B;
      --logo-color: #ff5;
      --logo-color-dark: #dd2;
    }
    .bubble {
      font-weight: 900;
      font-size: 2em;
    }
  </style>
  <section class='three'>
    <div class="bubble pos-x-50 pos-y-10 pos-line-75 width-70 left">Robin!! Did you wash your red shirt with my suit again?!?!</div>
    <div class="batman pos-x-80 mouth-angry eyes-angry"></div>
  </section>
</article>

Collaborations

Feel free to use the batman-comic.css library to create non-commercial comics. If you create a comic strip with this, please share it with me, you can find me on Twitter or Mastodon.

Attribution is required (a comment in source code is fine).


License

batman-comic.css is copyright 2024 by Alvaro Montoro.

The library is provided as-is. The author makes no representations or warranties of any kind, expressed or implied, as to the operation of the library, and is not responsible for any damage/side effect that the use of this library may cause.