Inset CSS Box Shadow — Valmis koodi
Rakenna CSS-ruutuvarjokoodia visuaalisesti: liukusäätimet offsetille, sumennukselle, leviämiselle, värjäytyksille ja peittävyydelle, upotettu tila ja jopa neljä tasoa live-esikatselulla.
Tulos
Tämä sivu avaa ruutuvarjogeneraattorin, jonka upotettu valintaruutu on jo valittuna, joten varjo piirretään elementin sisälle eikä sen taakse. Esikatselukortti näyttää upotetun tehosteen kerralla, ja jokainen liukusäädin päivittää CSS-riviä jatkuvasti.
Upotetut varjot ovat sitä, kuinka CSS väärentää syvyyttä sisäänpäin: painikkeiden tilat, hakukentät ja syöttökaivot, edistymispalkin kourut ja kaiverretut paneelit ovat kaikki riippuvaisia niistä. Koska varjo halaa sisäreunaa, sumennus ja leviäminen käyttäytyvät hieman eri tavalla kuin tavallisessa varjossa – tässä olevat liukusäätimet antavat sinun tuntea eron välittömästi.
Kun upotettu ulkoasu on oikea, kopioi laatikko-varjoviiva tyylisivullesi. Voit myös yhdistää upotetun kerroksen tavallisiin ulompiin kerroksiin – lisää toinen kerros ja poista sen upotuksen valinta, jotta molemmat sekoittuvat samaan ilmoitukseen.