Flexbox

Flexbox (Flexible Box) adalah fitur CSS3 yang mempermudah kita mendistribusi ruang kosong & mengatur ukuran elemen-elemen dalam sebuah kontainer. Jadi fungsi utamanya adalah untuk mempermudah pembuatan kontainer yang ketika ukurannya berubah, elemen di dalamnya bisa otomatis menyesuaikan ukuran & posisi.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      <div class="flex-item">7</div>
      <div class="flex-item">8</div>
    </div>
  </body>
</html>

Untuk bikin flexbox kita cukup pakai display:flex.

index.css
html,
body {
  padding: 0;
  margin: 0;
}

.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
}

.flex-item {
  background: lightyellow;
  padding: 12px;
  outline: 1px solid orange;
}

Justify Content

Secara default, posisi elemen-elemen di dalam kontainer adalah rata kiri, mirip kalo kita bikin elemen float. Selain itu lebarnya juga tetap, nggak berubah.

Continue reading →

Membuat Tooltip dengan CSS

Dalam artikel ini saya bahas cara cepat bikin tooltip dengan CSS (SCSS), tanpa JavaScript. Di sini saya bikin tooltip yang tampil di atas dan di samping elemen parent-nya. Saya mulai dari struktur HTML & CSS dasarnya dulu:

Jadi kelas utamanya .tooltip & untuk ngatur posisinya ada kelas .top untuk tampilan tooltip di atas & kelas .right untuk tampilan di samping kanan.

Bukan tooltip namanya kalo nggak ada pointer segitiganya. Caranya saya kopas aja dari sini: CSS Triangle.

Yang pertama, saya bikin tooltip tanpa border. Ini gampang sekali. Tinggal nempelin segitiga di bawah atau di samping. Untuk nampilin segitiga, saya pake pseudo-element :after.

Continue reading →