⭐ 0
🔍
Teksti Kuva PDF & Docs Ääni Musiikki Elektroniikka Aika Apuohjelmat Validaattorit Esoteerinen Pelit

Card Shadow CSS — Hienovarainen laatikkovarjokoodi

Rakenna CSS-ruutuvarjokoodia visuaalisesti: liukusäätimet offsetille, sumennukselle, leviämiselle, värjäytyksille ja peittävyydelle, upotettu tila ja jopa neljä tasoa live-esikatselulla.

0px
4px
12px
0px
0.25
Käsitellään... 0%

Tulos

Tämä sivu avaa laatikkovarjogeneraattorin esiasetetun perinteisen korttivarjon: 2px alas, 8px sumeus, 15% mustan peittävyys. Se on tarkoituksella hiljainen - riittää erottamaan kortin sivusta ilmoittamatta itsestään - ja esikatselu näyttää tarkalleen, kuinka hiljainen.

Tämä alue vastaa alhaisimpia korkeusaskeleita useimmissa suunnittelujärjestelmissä: luettelokortit, pudotusvalikot, ponnahdusikkunat ja taulukon rivit hiiri. Jos tarvitset vahvempaa nostoa modaaleille tai kelluville paneeleille, nosta Y-poikkeamaa ja sumenna yhdessä – niiden pitäisi kasvaa suhteessa, jotta valonlähde pysyy uskottavana.

Kopioi laatikko-varjon viiva komponenttityyleihisi tai kopioi se toiseksi tasoksi tiukemmalla sumennuksen lisäämiseksi reunan tarkkuuden lisäämiseksi. Työkalu on ilmainen ja toimii kokonaan selaimessasi.

🛡️
Suoritetaan selaimessa

Tiedostosi ja syötteesi eivät koskaan poistu tältä laitteelta. Käsittely toimii täysin offline-tilassa. 100 % turvallinen.

Hyväksytyt muodot ja säännöt

  • Liukusäätimet X/Y-offsetille, sumennukselle ja levittämiselle live-pikselilukemilla sekä värinvalitsin erillisellä peittävyyden liukusäätimellä.
  • Inset-valintaruutu ja tasoluettelo: lisää, valitse ja poista enintään neljä varjostusta.
  • Kopioitava laatikkovarjo-CSS-viiva, joka kattaa kaikki tasot, esikatsella vaihdettavalla vaalealla tai tummalla taustalla.

Tärkeimmät edut

✓ Jokainen liukusäädin päivittää esikatselukortin ja CSS-rivin välittömästi – ei tarvitse arvailla, miltä 0 8px 24px rgba(...) todellisuudessa näyttää.
✓ Jopa neljän varjokerroksen avulla voit rakentaa realistisia korkeuksia ja neumorfisia tehosteita, joita yhden varjon generaattorit eivät voi ilmaista.
✓ Vaalean/tumman taustan vaihtokytkin näyttää, kuinka varjosi lukee molemmissa teemoissa ennen sen lähettämistä.

Käyttötapaukset

  • • Soita pehmeässä korkeusvarjossa tuotekorttia varten vetämällä liukusäätimiä sen sijaan, että muokkaat rgba()-arvoja sokeasti.
  • • Rakenna kaksikerroksinen vaalea/tumma neumorfismiefekti ja kopioi koko monikerroksinen laatikkovarjoviiva yhdellä napsautuksella.
  • • Tarkista tummalla esikatselun taustalla, että varjosi lukee edelleen pimeässä tilassa ennen teeman lähettämistä.