Membuat Comic Layout dengan CSS

Apa yang khas dari komik (comic)? Gambar dan dialog dalam bulatan-bulatan (speech bubbles). Seperti contoh comic di atas. Membuatnya cukup menggunakan CSS dan HTML saja, contoh sebagai berikut.

...jalan ceritanya begitu.

Speech bubbles OMG!

What is this?

Akhir cerita!

All images taken from flickr.com

Ingin membuat layout comic hanya menggunakan CSS seperti contoh di atas?

Ini kodenya.

CSS

/* CSS untuk lebar halaman comic */
    .laman-comic {
      max-width:826px;
      margin:60px auto 0;
    }
/* CSS untuk lebar elemen tempat meletakkan gambar */
    .kotak-scene {
      width: 250px;
      height:250px;
      border:3px solid black;
      background: #fff;
      margin:8px;
      display: inline-block;
      position: relative;
    }
/* CSS untuk gambar, lebar dan tinggi sepenuh elemen */
    .kotak-scene img {
      width:100%;
      height:100%;
      display: block;
    }
/* CSS untuk keterangan/penjelasan gambar, misalnya alur cerita. */
    .jelaskan {
      padding:10px;
      margin:0;
      position: absolute;
      left:0;
      right:0;
      background:#e2e971;
      text-align:left;
      top:0;
    }
/* CSS untuk posisi keterangan gambar, yaitu di atas dan di bawah gambar */
    .jelaskan.bottom {
      bottom:0;
      top:auto;
      border-top:2px solid black;
    }
    .jelaskan.top {
      top:0;
       border-bottom:2px solid black;
    }
/* CSS untuk speech bubbles, bulatan berisi dialog */
    .bicara {
      width:40%;
      border-radius:50%;
      border:2px solid black;
      margin:0;
      position: absolute;
      z-index:1;
      background: Snow ;
      padding:20px;
      top:-15px;
      text-align: center;
    }
    /* CSS untuk pointer speech bubbles */
    .bicara:after {
      border-color: snow transparent;
      border-style: solid;
      border-width: 13px 13px 0;
      bottom: -11px;
      content: "";
      display: block;
      left: 50%;
      margin-left:-14px;
      position: absolute;
      width: 0;
    }
    .bicara:before {
      border-color: black transparent;
      border-style: solid;
      border-width: 16px 16px 0;
      bottom: -15px;
      content: "";
      display: block;
      left: 50%;
      margin-left:-17px;
      position: absolute;
      width: 0;
    }
/* CSS untuk letak speech bubbles, kiri dan kanan */
    .bicara.left {
      left:-15px;
    }
    .bicara.right {
      right:-15px;
    }

HTML

  
  <div class="laman-comic">

      
      <div class="kotak-scene">
        <p class="jelaskan bottom">Set the scene for the comic...</p>
        <p class="bicara left">Look at the view!</p>
        <img src="http://farm1.staticflickr.com/13/17778109_cc9d631ba7.jpg" alt="" />
      </div>

      
      <div class="kotak-scene">
        <p class="jelaskan top">...write anything in a caption.</p>
        <img src="http://farm7.staticflickr.com/6022/5918997962_f472e3ab8f.jpg" alt="" />
      </div>

     
      <div class="kotak-scene">
        <p class="bicara left">Speech bubbles OMG!</p>
        <img src="http://farm1.staticflickr.com/184/423566194_4513adf82d.jpg" alt="j" />
      </div>

      <div class="kotak-scene">
        <p class="bicara right">What is this?</p>
        <img src="http://farm9.staticflickr.com/8290/7762873604_216c58c99e.jpg" alt="" />
      </div>
      
      <div class="kotak-scene">
        <img src="http://farm8.staticflickr.com/7289/8735312953_992e5a8b8f.jpg" alt="" />
      </div>

      <div class="kotak-scene">
        <p class="jelaskan bottom">The End!</p>
        <img src="http://farm7.staticflickr.com/6231/6315319040_ece0b381a2.jpg" alt="" />
      </div>

       
  </div>

Inti dari artikel ini adalah membuat speech bubbles menggunakan CSS kemudian menggabungkannya dengan gambar sehingga menjadi layout sebuah halaman comic.

Selamat mencoba.

Sumber: Webmaker.