() translation by (you can also view the original English article)
Dalam tutorial ini saya akan menunjukkan kepada Anda cara membuat efek kaca buram di CSS. Anda akan melihat ini beraksi di UI seperti pada MacOS dan iOS, bahkan Windows saat ini, jadi ini jelas merupakan efek yang sedang tren. Kita dapat meniru kaca buram di situs web menggunakan CSS, dan dalam tutorial ini saya akan menunjukkan kepada Anda dua cara untuk melakukannya.
Efek Kaca Buram dalam CSS
Metode 1
Metode pertama memiliki dukungan browser yang cukup luas, tetapi membutuhkan lebih banyak CSS daripada pendekatan kedua yang akan kita lihat.
Mulailah dengan membuat div dengan kelas .container. Kita akan menggunakan ini untuk mewakili panel kaca buram kita. Kemudian, terapkan gambar latar belakang ke elemen body. Untuk latar belakang ini, Anda harus menerapkan:
1 |
body { |
2 |
background-attachment: fixed; |
3 |
}
|
Kita melakukan ini karena anak dari body akan mewarisi gambar latar belakang ini dan kita ingin menyimpannya pada ukuran yang sama.
Kita sekarang akan membuat elemen pseudo pada .container kita, dan itulah yang akan memberi kita blur. Jadi, kita menerapkan yang berikut:
1 |
.container:before { |
2 |
content: ''; |
3 |
position: absolute; |
4 |
top: 0; |
5 |
left: 0; |
6 |
right: 0; |
7 |
bottom: 0; |
8 |
}
|
Ini memberi kita elemen yang mencakup elemen container. Sekarang saatnya menambahkan beberapa warna, yang akan kita lakukan menggunakan bayangan kotak:
1 |
.container:before { |
2 |
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); |
3 |
}
|
Dan untuk memberi kita efek buram, kita menambahkan filter blur:
1 |
.container:before { |
2 |
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); |
3 |
filter: blur(10px); |
4 |
}
|
Ini memberi kita sebagian besar dari apa yang kita inginkan, tetapi belum ada di sana. Kita sekarang perlu (seperti yang kita bahas sebelumnya) untuk mengatur latar belakang yang diwarisi untuk elemen pseudo dan induknya.
1 |
.container { |
2 |
background: inherit; |
3 |
}
|
4 |
|
5 |
.container:before { |
6 |
background: inherit; |
7 |
}
|
Dengan beberapa penyesuaian opsional, inilah hasil akhirnya:
Metode 2
Sekarang untuk metode alternatif yang menggunakan penataan style yang sedikit lebih sedikit, tetapi menikmati sedikit dukungan browser. Kita mulai dengan elemen .container yang sama dan menerapkan gambar latar belakang sampul yang sama ke elemen body.
Kemudian kita mengalihkan perhatian kita ke properti CSS yang disebut backdrop-filter. Kita mulai dengan menambahkan beberapa style tampilan ke .container kita, termasuk warna latar belakang apa pun yang kita suka (mari kita gunakan putih pucat):
1 |
.container { |
2 |
background-color: rgba(255, 255, 255, .15); |
3 |
}
|
Kemudian kita menambahkan filter (Anda mungkin perlu memasukkan awalan yang sesuai untuk browser Anda, atau cukup periksa autoprefixer jika Anda menggunakan Codepen).
1 |
.container { |
2 |
background-color: rgba(255, 255, 255, .15); |
3 |
backdrop-filter: blur(5px); |
4 |
}
|
Itu dia! Bermain-main dengan nilai blur untuk mendapatkan efek yang Anda inginkan, tetapi tidak ada yang dibutuhkan. Inilah yang memberi Anda:
Kesimpulan
Kerugian untuk menggunakan yang kedua dari metode ini adalah dukungan browser yang buruk. Saat ini Anda dapat mengharapkan dukungan di Edge, dan Safari, tetapi itu saja. Namun, efek kaca buram ini bisa menjadi cara yang sangat baik untuk meningkatkan UI untuk browser yang mendukungnya.
CSSBersenang-senang Dengan CSS Besok: Backdrop Filters
CSS Grid LayoutBuat Galeri Gambar Kotak CSS (Dengan Blur Effect dan Interaction Media Queries)
CSSCara Mendaftar Filter Instagram di Browser Menggunakan Pure CSS
Link yang berguna
