Menghindari Style Inherit dari Parent ke Children dengan Pseudo
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
- 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
Cara Membuat Text Border/Outline Di Flutter Yang Simpel
Artikel ini berdasarkan kesulitan saya dengan flutter saat ingin membuat widget text yang memiliki outline, saat itu saya butuh untuk memperjelas teks agar tidak samar dengan gradasi background dan ba...
Rangkuman Minggu Ini #1
26 Agustus# Cara Instal Ollama Menggunakan RX 6600 di Windows# Awal minggu ini saya menulis tentang instalasi Ollama di sistem operasi Windows yang ditenagai kartu grafis RX 6600. Menariknya adalah sa...