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

Comments

  1. Ternyata cuma :before and :after :)

    Gan, supaya jenis font artikel beda-beda setiap artikel gimana caranya?

    ReplyDelete
    Replies
    1. Tambah link untuk font :hah:

      Delete
    2. Baca artikel http://jelasinblog.blogspot.com/2014/03/setiap-artikel-blog-beda-font.html

      Delete

Post a Comment

Popular posts from this blog

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template