Cara gampang bikin `glass` efek di Tailwind CSS

Tailwind CSS 29 Nov 2021

Seperti yang sudah ada di featured image di atas, kita tinggal manfaatkan beberapa class di Tailwind CSS, yaitu backdrop-filter, backdrop-blur-*, dan bg-opacity-* .

Backdrop Filter sendiri adalah utilitas di Tailwind CSS v2.1+ untuk mengaktifkan dan menonaktifkan filter tampilan latar pada sebuah elemen. Jadi untuk menggunakan class-class backdrop-* , kita harus menambahkan class backdrop-filter untuk mengaktifkannya. Contoh penggunaan class-nya seperti ini:

<div class="backdrop-filter backdrop-blur-md ...">
  <!-- ... -->
</div>

Backdrop Blur adalah sebuah utilitas untuk menerapkan filter blur latar belakang ke elemen. Ada beberapa class yang tersedia bawaan Tailwind CSS yang bisa langsung dipakai tanpa tambahan konfigurasi seperti:

Untuk implementasinya langsung saja seperti ini:

<!-- Tanda * diganti sesuai ukuran blur yang diinginkan seperti `backdrop-blur-lg -->
<div class="backdrop-filter backdrop-blur-* ...">
  <!-- ... -->
</div>

Kemudian untuk Background Opacity yaitu untuk menerapkan transparansi ke latar belakang gambar ataupun warna. Tailwind CSS menggunakan skala transparansi berdasarkan % dari 0 sampai 100, kemudian untuk class bawaannya sendiri adalah sebagai berikut:

Kita bisa dengan gampang menambah variasi transparansi jika dibutuhkan di konfigurasi tailwind.config.js dengan cara:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      opacity: {
        '15': '0.15',
        '35': '0.35',
        '65': '0.65',
      }
    }
  }
}

Oke! Sampai disini sudah mengerti kan? lanjut ke pembahasan artikelnya haha.. ๐Ÿ˜…

Untuk contoh kali ini kita menggunakan https://play.tailwindcss.com/ untuk praktik. Saya sudah membuat template dasar yang bisa kita gunakan untuk implementasikan langsung, karna kita cuma fokus ke penerapan blur efek. Cek kode di bawah:

<div class="min-h-screen bg-gray-100 flex flex-col justify-center relative">
  <div class="absolute inset-0">
    <img src="https://picsum.photos/seed/picsum/1366/768" alt="" class="w-full h-full object-cover" />
  </div>

  <div class="p-10">
    <!-- Di sini kita akan menerapkan efeknya -->
    <div class="relative flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0 bg-gray-400 w-full rounded-xl p-6 md:p-8 shadow-xl">
      <img src="https://picsum.photos/id/1024/500" alt="" class="w-full md:w-40 h-80 md:h-40 rounded-lg object-cover object-center">

      <div class="flex flex-col space-y-2 text-gray-800">
        <h2 class="text-2xl md:text-3xl lg:text-4xl font-semibold">Cara Gampang bikin `glass` efek di Tailwind CSS</h2>
        <p class="text-sm md:text-base">Tinggal manfaatkan kombinasi class <code class="text-red-500">backdrop-filter backdrop-blur-*</code> dengan latar belakang transparan <code class="text-red-500">bg-opacity-*</code></p>
      </div>
    </div>
  </div>
</div>

Preview kode di atas kira-kira seperti ini:

Kemudian kita tambahkan class bg-opacity-40 (kita bisa menggunakan skala transparansi sesuai kebutuhan, dalam contoh ini saya menerapkan transparansi 40%) dan hasilnya akan seperti ini:

Sekarang tinggal menerapkan efek blurnya dengan menambahkan class backdrop-filter dan backdrop-blur-* , dalam contohnya saya menggunakan backdrop-blur-sm dan hasilnya akan seperti:

Sangat gampang kan? iyalah ๐Ÿ˜‚

Kode lengkapnya bisa dilihat di sini:

Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwindโ€™s build-time features directly in the browser.

Tag

Muh Ghazali Akbar

๐Ÿ‡ฎ๐Ÿ‡ฉ Remote worker, ๐Ÿ’ป Laravel, Vue, React, and Tailwind CSS

Mantap! Kamu telah berhasil berlangganan.
Mantap! Selanjutnya, selesaikan pembayaran untuk akses penuh.
Selamat datang kembali! Kamu telah berhasil masuk.
Sukses! Akun kamu telah aktif, sekarang kamu bisa mengakses semua konten.