Generator Box Shadow

Seret slider kangge ngatur box-shadow, tumpuk lapisan kangge efek jero, lan salin CSS kanthi cepet.

Lapisan wewayangan
Lapisan 1
CSS
Suaikaken slider kangge ngatur wujud wewayangan panjenengan.

Saben wewayangan dipunproses wonten ing browser panjenengan. Boten wonten data ingkang dipununggah dhateng BroBroGo.

FAQ

Menapa ingkang dipun-atur dening offset, blur, lan spread?

Offset mindhah wewayangan mangiwa/manengen lan mandhap/minggil, blur ngalusaken pinggiranipun, lan spread njembaraken utawi nyilikaken wewayangan sadurunge dipun-blur. Spread negatif badhe narik wewayangan mlebet, migunani kangge wewayangan ingkang rapet.

Menapa fungsi saking pilihan inset?

Wewayangan normal dawah wonten ing njawi elemen, kados cahya ing wingkingipun kertu. Inset ngowahi wewayangan dados wonten ing nabet, saengga elemen katingal mlebet — migunani kangge input utawi tombol ingkang dipunpencet.

Kenging menapa kedah ngginakaken langkung saking satunggal lapisan wewayangan?

Wewayangan tunggal badhe katingal rata yen ukranipun ageng. Efek elevasi ingkang nyata biasane nggabungaken wewayangan peteng ingkang tipis kaliyan wewayangan alus ingkang langkung wiyar — tambah lapisan kaping kalih lan setel piyambak-piyambak kangge pikantuk efek kasebat.

Ditulis lan ditinjau dening tim editorial BroBroGo.Pungkasan dipunanyari:

Pangertosan CSS Box Shadow lan Parameteripun

Properti box-shadow wonten ing CSS minangka salah satunggalipun cara utama kangge paring efek dimensi lan amblesan wonten ing elemen desain web. Kangge ngasilaken wewayangan ingkang pas, wonten sekawan parameter ukuran utama ingkang kedah dipun-atur kanthi titi:

  • Offset horisontal: Ukuran menika nemtokaken posisi wewayangan mangiwa utawi manengen. Nilai ingkang saged dipun-atur mawi slider inggih menika antawisipun -50px ngantos 50px. Nilai negatif badhe mindhah wewayangan mangiwa, dene nilai positif mindhah wewayangan manengen.
  • Offset vertikal: Parameter menika nemtokaken posisi wewayangan minggil utawi mandhap kanthi rentang -50px ngantos 50px. Nilai negatif mindhah wewayangan minggil, dene nilai positif mindhah wewayangan mandhap.
  • Blur: Slider menika ngatur tingkat kealusan utawi ketajaman pinggiran wewayangan kanthi rentang 0px ngantos 100px. Nilai 0px tegesipun wewayangan katingal cetha lan kaku tanpa wonten efek pudar.
  • Spread: Parameter menika kangge njembaraken utawi nyilikaken ukuran wewayangan sadurunge efek blur dipun-trapaken, kanthi rentang -50px ngantos 50px. Nilai spread ingkang negatif badhe narik wewayangan mlebet, saengga wewayangan katingal langkung rapet lan tipis.

Saben owah-owahan saking slider menika badhe langsung nganyari kode CSS kanthi wektu nyata (real-time).

Bedanipun Wewayangan Normal lan Inset

Wonten ing desain antarmuka, arah dawahipun wewayangan saged nemtokaken persepsi visual pangguna babagan posisi elemen kasebat. Generator Box Shadow nyediyaken pilihan "Wewayangan inset" ingkang saged dipun-aktifaken mawi tombol toggle.

Wonten ing kahanan standar (normal shadow), wewayangan badhe dawah wonten ing njawi elemen. Efek menika paring kesan bilih elemen kasebat ngambang utawi wonten ing nginggilipun latar wingking, kados dene kertu ingkang dipun-angkat. Kosok balenipun, nalika pilihan "Wewayangan inset" dipun-aktifaken, wewayangan badhe dipun-balik lan dawah wonten ing nabet (sisih lebet) elemen. Efek inset menika paring kesan visual bilih elemen kasebat ambles utawi dipunpencet mlebet, saengga cocok sanget dipunginakaken kangge desain kolom input utawi tombol aktif.

Teknik Numpuk Lapisan kangge Efek Jero lan Nyata

Wewayangan tunggal asring katingal kaku lan kirang alami, utamanipun kangge wewayangan ingkang ukuranipun ageng. Kangge ngatasi prakawis menika, desainer lan pangembang web saged ngginakaken teknik numpuk sawetara lapisan wewayangan (multi-layered shadow).

Generator Box Shadow nyediyaken fitur kangge nambah lan mbusak lapisan wewayangan mawi tombol "Tambah lapisan" lan "Busak lapisan". Piranti menika sampun nyiapaken gangsal lapisan kanthi standar, ingkang pundi lapisan kapisan gadhah nilai gawan 0 8 24 -4 mawi opasitas ireng transparan 18%, dene sekawan lapisan sanesipun dipun-singitaken ing wiwitan. Nalika panjenengan ngginakaken langkung saking satunggal lapisan, output CSS badhe dipun-serat kanthi otomatis mawi pamisah tenger koma.

Kanthi nggabungaken wewayangan peteng ingkang tipis lan rapet ing lapisan ngandhap, dipuntumpuk kaliyan wewayangan alus ingkang langkung wiyar ing lapisan nginggil, panjenengan saged ngasilaken efek elevasi ingkang nyata lan nggadhahi dimensi jero.

Cara Ngginakaken Generator Box Shadow

Kangge ngrancang wewayangan ngginakaken piranti menika, panjenengan saged ngetutaken langkah-langkah ing ngandhap:

  1. Atur Lapisan: Panjenengan saged ngginakaken lapisan ingkang sampun wonten utawi klik "Tambah lapisan" kangge nambahaken efek anyar. Saben lapisan saged dipun-setel piyambak-piyambak.
  2. Setel Posisi lan Ukuran: Geser slider "Offset horisontal" lan "Offset vertikal" kangge nemtokaken arah cahya. Atur slider "Blur" kangge ngatur kealusan, lan "Spread" kangge ngatur jembaripun wewayangan.
  3. Pilih Warni lan Transparansi: Pilih warna wewayangan mawi "Warni wewayangan" lan atur tingkat transparansi ngginakaken slider "Opasitas".
  4. Terapaken Inset Yen Perlu: Aktifaken "Wewayangan inset" menawi panjenengan badhe nggawe efek elemen ambles.
  5. Salin Kode CSS: Sasampunipun tampilan wewayangan jumbuh kaliyan kabetahan, klik tombol "Salin CSS" kangge nyalin kode asilipun lan langsung dipun-tempel (paste) wonten ing berkas stylesheet proyek panjenengan.

Keamanan Data lan Pangolahan Lokal

Saben setelan wewayangan ingkang panjenengan atur wonten ing Generator Box Shadow dipunproses langsung wonten ing browser panjenengan piyambak. Boten wonten data parameter, warna, utawi setelan lapisan ingkang dipununggah dhateng server BroBroGo. Proses ingkang mlaku kanthi lokal menika njamin bilih aktivitas desain panjenengan tetep dados privasi panjenengan piyambak.

Pitakonan ingkang Asring Dipun-ajengaken (FAQ)

Menapa ingkang dipun-atur dening offset, blur, lan spread? Offset mindhah wewayangan mangiwa/manengen lan mandhap/minggil, blur ngalusaken pinggiranipun, lan spread njembaraken utawi nyilikaken wewayangan sadurunge dipun-blur. Spread negatif badhe narik wewayangan mlebet, migunani kangge wewayangan ingkang rapet.

Menapa fungsi saking pilihan inset? Wewayangan normal dawah wonten ing njawi elemen, kados cahya ing wingkingipun kertu. Inset ngowahi wewayangan dados wonten ing nabet, saengga elemen katingal mlebet — migunani kangge input utawi tombol ingkang dipunpencet.

Kenging menapa kedah ngginakaken langkung saking satunggal lapisan wewayangan? Wewayangan tunggal badhe katingal rata yen ukranipun ageng. Efek elevasi ingkang nyata biasane nggabungaken wewayangan peteng ingkang tipis kaliyan wewayangan alus ingkang langkung wiyar — tambah lapisan kaping kalih lan setel piyambak-piyambak kangge pikantuk efek kasebat.

Generator CSS Cubic BezierSeret kalih gagang kangge ngatur kurva easing, pirsani gerakan titik dibandhingake karo kacepetan konstan, lan salin nilai cubic-bezier().Generator GradienDamel gradien linear, radial, utawi conic, tambahaken color stops lan atur arahnipun, banjur salin CSS kanthi saklik.Generator Border RadiusNgbunderaken saben pojokan kanthi slider, damel wujud blob organik mawi mode elips, lan salin CSS kanthi cepet.Generator FlexboxAtur wadhah flex lan item-itemipun kanthi kontrol visual, pirsani owah-owahanipun kanthi langsung, lan salin CSS kanthi saklik.Generator CSS GridAtur kolom lan baris panjenengan, seret nglangkungi sel kangge masang item, lan salin CSS grid sarta HTML kanthi saklik.Kalkulator CSS clamp()Lebaken ukuran kangge layar alit lan ageng, banjur pikantuk nilai clamp() fluid ingkang saged gantos kanthi alus — kangge ukuran font, padding, margin, utawi gap.Konverter WarniKonversi warni antawisipun HEX, RGB, HSL, HSV, CMYK, lan LAB — sunting salah satunggal kolom lan kolom sanesipun badhe langsung nganyari.CSS Beautifier & MinifierAtur malih indentasi CSS ingkang semrawut supados gampil dipun-waos, utawi minifikasi kagem rilis — mawi mode aman ingkang mboten nate ngowahi urutan aturan panjenengan.Pemeriksa KontrasLebaken warni teks lan latar wingking kangge mirsani rasio kontras WCAG sarta tingkat AA lan AAA ingkang lulus.