CSS box-shadow-kragopwekker
Bou 'n box-shadow deur skuiwers te skuif en die resultaat op 'n kaart te sien. Stapel tot ses lae vir sagter, meer realistiese skaduwees, gebruik inset vir ingedrukte effekte, en begin by voorinstellings soos sag, swewend, gloed of neumorfisme. Kopieer die CSS met een klik.
Hoe om dit te gebruik
- Kies 'n voorinstelling of pas die afstand, vervaging, verspreiding, kleur en deursigtigheid van die skaduwee aan.
- Voeg lae by met + en kies elkeen om dit te wysig; verander die agtergrond, bokskleur en hoekradius om by jou ontwerp te pas.
- Kopieer die CSS en plak dit in die reël van die element.
Gereelde vrae
Wat doen vervaging en verspreiding?
Vervaging maak die rand van die skaduwee sagter; nul gee 'n harde rand. Verspreiding maak die skaduwee in alle rigtings groter voor die vervaging, en 'n negatiewe verspreiding maak dit kleiner, wat help dat 'n groot vervaagde skaduwee onder die element bly.
Hoekom verskeie skaduwee-lae gebruik?
Regte skaduwees is donkerder naby die voorwerp en vervaag verder weg. As jy 'n klein, skerp skaduwee met 'n groter, sagter een kombineer, boots dit na en lyk dit natuurliker as 'n enkele skaduwee. Die eerste laag in die lys word bo-op geteken.
Maak box-shadow 'n bladsy stadiger?
Nie in normale gebruik nie. Baie groot vervagings op baie elemente, of om die skaduwee self te animeer, kan werkverrigting op stadige foons kos; om te animeer, verander eerder die deursigtigheid van 'n pseudo-element wat die skaduwee dra.
🏷️ Meta-etiket-kragopwekker
🖼️ Open Graph-kragopwekker
🔗 UTM-skakelbouer
🌈 CSS-gradiëntkragopwekker