Menghindari Style Inherit dari Parent ke Children dengan Pseudo

3 menit baca
Web Development

Masalah

Trend design yang beragam seringkali memunculkan perdebatan antara Designer dan Front-end tentang seimbangnya hasil design dengan kerumitan proses.

  • Designer seringkali menghasilkan design tanpa memandang penerapan teknis.
  • Front-end seringkali memandang rumit proses sehingga tampilan terasa tidak sebanding.

Jalan tengah dari keduanya harus disepakati agar design dapat diterapkan sehingga menjadi website yang fungsional.

Kasus

Salah satu kasusnya adalah penerapan background blur pada suatu komponen di website.

Gambar

Contoh perbandingan background blur tanpa dan dengan pseudo

  • Gambar sebelah kiri adalah contoh jika background blur langsung diterapkan di parent komponen.
  • Gambar sebelah kanan adalah contoh jika menggunakan pseudo dari parent untuk menerapkan blur.

Kode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #fff;
        margin: 0;
        color: #fff;
        font-family: sans-serif;
      }
      .list {
        position: relative;
      }
      div {
        width: 600px;
        height: 100dvh;
        margin: 0 auto;
        display: flex;
        align-items: center;
      }
      .ulist {
        list-style: none;
        width: 300px;
        height: calc(50dvh - (48px * 2));
        margin: 0 auto;
        padding: 48px 36px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 24px;
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        letter-spacing: 2px;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
        overflow: hidden;
      }
      .ulist1 {
        position: relative;
      }
      .ulist1::before {
        content: '';
        background-image: url('./img.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        position: absolute;
        top: -4px;
        left: -4px;
        filter: blur(4px) opacity(0.75);
      }
      .ulist2 {
        background-image: url('./img.webp');
        background-position: -4px -4px;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(4px) opacity(0.75);
      }
    </style>
  </head>
  <body>
    <div>
      <ul class="ulist ulist2">
        <li class="list">Home</li>
        <li class="list">About</li>
        <li class="list">Contact</li>
        <li class="list">Privacy Policy</li>
        <li class="list">Terms of Service</li>
      </ul>
      <ul class="ulist ulist1">
        <li class="list">Home</li>
        <li class="list">About</li>
        <li class="list">Contact</li>
        <li class="list">Privacy Policy</li>
        <li class="list">Terms of Service</li>
      </ul>
    </div>
  </body>
</html>

Penjelasan

Styling blur yang dimiliki parent akan turut diterapkan kepada semua children yang ada. Di sisi lain pseudo, adalah children dari parent yang tidak dapat menurunkan styling apapun kepada sibling.

Related Posts