⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Penjana Glassmorphism

Dail dalam kad kaca berfros — kabur, rona, serlahan jidar, jejari sudut dan bayang — dipratonton terapung di atas latar belakang animasi tulen supaya kualiti kabur kelihatan dalam gerakan.

12px
20px
20
40
1px
30px

Kad kaca beku

Kad ini terapung di atas latar belakang yang terus bergerak supaya anda boleh menilai kekaburan dalam gerakan, bukan terhadap swatch rata.

Memproses... 0%

Hasilnya

backdrop-filter: blur() ialah sifat CSS di sebalik rupa kaca beku — panel lut sinar yang mengaburkan apa sahaja yang bergerak di belakangnya dan bukannya memudarkan warna rata. Tangkapannya ialah kualiti kabur hampir mustahil untuk dinilai terhadap swatch statik; ia hanya dibaca sebagai meyakinkan apabila sesuatu benar-benar bergerak di bawahnya, seperti yang akan berlaku pada halaman sebenar dengan kandungan, video atau wira animasi. Penjana ini meletakkan kad pratonton di atas latar belakang animasi asli dan bukannya latar belakang pegun, jadi perkara yang anda lihat semasa menyeret peluncur ialah perkara yang sebenarnya akan dialami oleh pelawat.

Latar belakang ialah animasi CSS sebenar: kecerunan linear besar yang dicat pada 400% saiz elemen, dengan @keyframes mengalihkan kedudukan latar belakangnya ke depan dan ke belakang pada gelung — tiada gelung animasi JavaScript, tiada kanvas, hanya teknik kedudukan latar belakang berterusan yang sama digunakan dalam bahagian wira pengeluaran. Kabur, warna rona dan kelegapan, warna serlahan jidar/kelegapan/lebar, jejari sudut dan kelembutan bayang semuanya memacu gaya langsung kad terapung dan kotak CSS yang boleh disalin mencerminkan nilai yang sama.

Tidak setiap penyemak imbas menyokong penapis latar belakang, jadi penjana juga mengeluarkan blok @supports not (penapis latar belakang: blur(1px)) sebenar — bukan gerak isyarat token, tetapi peraturan sandaran dengan warna latar belakangnya sendiri yang dikira daripada kelegapan rona sebenar anda. Kerana lutsinar tanpa kabur kelihatan lebih teruk (apa sahaja yang di belakangnya ditunjukkan melalui tidak kabur), sandaran secara automatik menaikkan saluran alfa di atas kelegapan warna pilihan anda dan ulasan dalam CSS yang dijana menerangkan dengan tepat sebab dan berapa banyak.

Semuanya dikira dan dipaparkan dalam penyemak imbas anda sendiri: tiada muat naik, tiada akaun, tiada pelayan pergi-balik. Salin CSS sebaik sahaja kad kelihatan betul, lepaskan ia pada mana-mana elemen yang anda mahu letak di atas foto, video atau kecerunan dan kekalkan blok @supports supaya penyemak imbas yang lebih lama masih mendapat kad yang boleh dibaca dan lebih legap berbanding kad yang hampir tidak kelihatan.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Kabur, warna rona/kelegapan, warna serlahan jidar/kelegapan/lebar, jejari sudut dan kawalan kelembutan bayang, semuanya secara langsung.
  • Latar belakang kecerunan CSS animasi di belakang kad melalui gelung kedudukan latar belakang @keyframes sebenar, jadi kabur beku boleh dilihat terhadap gerakan tulen.
  • CSS boleh salin termasuk blok sandaran @supports not (penapis latar belakang) sebenar dengan kelegapan yang lebih tinggi secara automatik, mengulas dan menjelaskan.

Faedah Utama

✓ Kad pratonton terapung di atas latar belakang kecerunan yang bergerak secara berterusan, jadi anda menilai kekaburan cara pelawat sebenarnya akan — dalam gerakan, bukan terhadap swatch rata.
✓ Keluaran menghantar sandaran bukan @supports tulen (penapis latar) dengan kelegapannya yang dikira daripada tetapan warna anda sendiri, bukan tekaan tetap.
✓ Setiap kawalan — kabur, rona, serlahan jidar, jejari, kelembutan bayang — mengemas kini kad langsung dan CSS yang boleh disalin pada setiap seretan.

Kes Penggunaan

  • • Reka bentuk bar navbar atau tindanan modal berfros dan nilaikan kualiti kabur pada latar belakang yang bergerak dan bukannya swatch warna rata.
  • • Dail dalam sorotan sempadan halus dan kelembutan bayangan untuk kad harga, kemudian salin CSS yang sudah termasuk sandaran yang anggun untuk penyemak imbas yang lebih lama.
  • • Semak berapa banyak kelegapan warna perlu meningkat dalam sandaran @supports sebelum menghantar bahagian wira kaca beku.