Cara Membuat Glassmorphism UI

Glassmorphism UI merupakan design yang banyak diminati sekarang ini. Dengan perpaduan object terlihat seperti glass yang transparant membuat tampilan semakin keren.

Kita dapat dengan mudah membuat glassmorphism ui dengan html dan css aja. Html akan membuatkan elementnya seperti card dan css akan membuat tampilan element menjadi glassmorphism.

Untuk tutorial kali ini, kita juga akan menggunakan bantuan gsap yang merupakan javascript library untuk membuat animation disetiap element agar tampilan semakin menarik.

Membuat Element HTML

Pertama, kita buat terlebih dahulu folder baru dengan nama glassmorphism. Setelah itu, didalam folder tersebut kita buat 2 file yaitu index.html dan style.css

Buka folder tersebut dengan text editor kalian, disini saya menggunakan visual studio code. Kemudian, buka file index.html

Kita akan membuat struktur html sederhana terlebih dahulu yang terdiri head dan body seperti berikut ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism Landing Page</title>

  <link rel="stylesheet" href="style.css" />
</head>
<body>
 
</body>
</html>

Didalam tag head kita akan mengubah title dan membuat element link untuk menghubungkan dengan style.css yang kita buat tadi.

Kita akan mendowload terlebih dahulu gambar abstract di unplash. Disini saya akan menggunakan gambar berikut. Jika kalian ingin gambar yang sama, kalian bisa download disini.

Setelah berhasil didownload pindahkan gambar tersebut kedalam folder yang kita buat tadi. Disini kita akan membuat tag img dengan mengambil gambar yang kita download dan membuat beberapa description.

<img src="abstract.jpg" alt="abstract">

<div class="container" id="glass">
  <h2 class="seq">Hello Everyone</h2>
  <p class="seq">Let's go ahead and get this show on the road</p>
</div>

<h1>Glassmorphism Realized</h1>

Taruh source code diatas, kedalam tag body dan jalankan file index.html menggunakan live server. Jika kalian pengguna vsCode, kalian bisa download live server di extension terlebih dahulu.

Membuat Effect Glassmorphism UI

Tampilan website yang kita buat masih belum bagus. Oleh karena itu, kita perlu memberikan beberapa effect pada element html.

Kita buka terlebih dahulu file style.css dan kita ubah background body menjadi light blue serta yang lainnya seperti color, font family, margin, padding dan height.

Selanjutnya, untuk img kita ubah position, z index, height, top, dan left. Terakhir kita ubah bagian tag h1.

body {
  background: #c8dce7;
  color: black;
  font-family: "Poppins";
  margin: 0;
  padding: 10em 14em 14em 20em;
  height: 100px;
}

img {
  position: absolute;
  z-index: -2;
  height: 100vh;
  top: 0;
  left: 0;
}

h1 {
  font-size: 3em;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

Untuk tampilan sementara halaman website akan terlihat seperti berikut ini

Kita masih belum menambahkan effect di class container. Untuk itu kita tambahkan css agar tampilan terlihat seperti glass.

.container {
  display: inline-block;
  background: rgba(248, 236, 236, 0.2);
  padding: 3em;
  border-radius: 3em;
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border: solid 2px transparent;
  background-clip: padding-box;
  -webkit-box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
}

.container h2 {
  font-size: 1.7em;
}

.container h1,
.container h2 {
  margin: 0;
}

.container p {
  margin: 0;
}

Membuat Effect Animation dengan GSAP

Setelah kita berhasil membuat glassmorphis ui pada website, rasanya kurang afdol jika belum ditambahkan effect animation. Oleh karena itu, kita akan membuat effect animation di setiap element html yang kita buat tadi.

Pertama, kita install gsap menggunakan cdn dan taruh ke dalam tag script diatas penutup tag body.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

Selanjutnya kita buat lagi tag script yang didalamnya akan berisi effect untuk setiap element html seperti berikut ini.

 <script>
    const tl = gsap.timeline({default: {ease: "power2.inOut", duration: 1.5}});

    tl.from("img", {x: "-10%", opacity: 0})
      .from(".container", {opacity: 0, delay: 0.5, duration: 1}, "-=1.5")
      .from(".container", {x: "-20%", backdropFilter: "blur(0px)"})
      .from(".seq", {y: -30, opacity: 0, stagger: 0.2, duration: 0.5}, "-=0.5")
      .from("h1", {y: 20, clipPath: "inset(0 0 100% 0)"}, "-=0.8")
  </script>

Pertama kita perlu memanggil gsap.timeline yang didalamnya kita setting ease dan durationnya. Lalu kita masukkan ke dalam constanta tl yang nantinya kita gunakan di element html.

Pada bagian pertama kita panggil tl.from yang berisi element html dan style css. Disini kita akan mengubah x menjadi -10% dan opacity menjadi 0.

Kemudian berlanjut sampai ke tag h1 hingga semua element memiliki effect animation seperti berikut ini.

Penutup

Selamat kita telah berhasil membuat glassmorphism ui di website. Selain itu, kita juga memberikan effect yang membuat tampilan website mejadi lebih keren.

Cukup sekian tutorial kali ini tentang cara membuat glassmorphism ui. Jika masih ada kesulitan, kalian bisa komentar dibawah sini.

Membuat Element HTML

Membuat Effect Glassmorphism UI

Membuat Effect Animation dengan GSAP

Penutup

Leave a Comment Cancel Reply