Jarenlang zagen mijn schaduwen er nep uit en ik kon niet achterhalen waarom. Ik zou schrijven box-shadow: 0 5px 10px black, pak een modderige grijze halo, zet hem strakker en blijf me vaag ontevreden voelen. De kaart zag eruit alsof hij een blauwe plek had, geen schaduw. Pas toen ik de ontwerpsystemen die ik bewonderde uit elkaar begon te trekken - die waarbij kaarten echt lijken te zweven - besefte ik de truc. Ze gebruiken nooit één schaduw. Ze stapelen er twee of drie op, elk doen ze een ander werk, en het resultaat leest als licht dat zich gedraagt zoals licht zich feitelijk gedraagt.
Ik bouw interfaces in React en Tailwind voor de kost, ik onderhoud een WordPress-adminthema in WP Adminify waar schaduwen een groot deel van de visuele hiërarchie dragen, en ik heb de CSS-doosschaduwgenerator op Toolz.dev omdat ik moe werd van het met de hand afstemmen van meerlaagse schaduwen in een teksteditor en het herladen om het resultaat te zien Deze gids is alles wat ik heb geleerd over de box-shadow eigenschap: wat elke waarde doet, waarom gelaagdheid werkt, hoe u de gebruikelijke vallen kunt vermijden en hoe u de generator kunt gebruiken om binnen een paar minuten van een leeg element naar productie-CSS te komen.
tl;dr: EEN CSS
box-shadowneemt een X-offset, een Y-offset, een vervagingsradius, een spreidingsradius en een kleur, met een optioneleinsettrefwoord. vervaging verzacht de rand; spreiding groeit of krimpt de schaduw voordat deze vervaagt Echte elevatie komt van het stapelen van meerdere komma-gescheiden schaduwen, niet van het aanzwengelen van één schaduw' s opaciteit Gebruik zwart met lage opaciteit, een kleine Y-offset, royale vervaging en een enigszins negatieve spreiding - kopieer vervolgens de CSS rechtstreeks van de generator.
Wat doet het box-shadow-eigendom eigenlijk?
box-shadow schildert een of meer schaduwen rond een element's randvak, en de eigenschap is gespecificeerd in CSS Achtergronden en Grenzen Niveau 3. De syntaxis voor een enkele schaduw ziet er als volgt uit
box-shadow: <inset?> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
De offsets zijn vereist; vervagen, spreiden en kleuren zijn optioneel, maar je zult ze bijna altijd instellen. Dit is wat iedereen bestuurt, in de manier waarop ik erover nadenk bij het afstemmen:
Offset X verplaatst de schaduw horizontaal Positieve waarden duwen hem naar rechts, negatief naar links Voor de meeste grensvlakschaduwen wil je dit op of nabij nul, omdat licht in de echte wereld meestal van boven komt, waardoor schaduwen recht naar beneden worden geworpen in plaats van opzij.
Offset Y verplaatst de schaduw verticaal Positieve waarden drukken hem naar beneden, dat is wat je wilt voor een element dat boven de pagina lijkt te zitten Dit is de enkele waarde die het meest bepaalt hoe "high" het element voelt.
Vervagingsradius verzacht de schaduw' s rand Een waarde van nul geeft een harde schaduw zoals een vaste vorm; grotere waarden spreiden de zachtheid uit Dit kan niet negatief zijn Bijna elke natuurlijk ogende schaduw gebruikt een vervaging die meerdere malen groter is dan zijn Y-offset.
Spreid radius verandert de grootte van de schaduw voordat de onscherpte wordt aangebracht Positieve spreiding maakt de schaduw groter in elke richting; negatieve spreiding krimpt het Negatieve spreiding is het geheime wapen voor strakke, geloofwaardige kaartschaduwen, omdat het de schaduw naar binnen trekt zodat het niet voorbij het element uitbloedt.
Kleur is elke geldige CSS-kleur De beste interface-schaduwen gebruiken zwart of bijna zwart bij lage dekking - zoiets als rgba(0, 0, 0, 0.1) - in plaats van een volledig ondoorzichtig grijs, omdat een doorschijnend zwart alles wat erachter zit, laat doorschemeren zoals een echte schaduw dat doet.
Waarom gebruiken goede schaduwen meer dan één laag?
Dit is het idee dat mijn schaduwen volledig veranderde, dus het krijgt een eigen sectie Een enkele schaduw is een enkele, uniforme klodder Echte schaduwen zijn niet uniform Dicht bij het object is de schaduw donkerder en scherper; verder weg is het lichter en diffuser Je benadert die falloff door schaduwen te stapelen.
Een klassiek recept bestaat uit twee lagen: een strakke, iets donkerdere schaduw die dicht bij het element zit en het een knapperige basis geeft, plus een zachtere, bredere, lichtere schaduw eronder die zorgt voor de omgevingsdiffusie. Zoiets als
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
De browser schildert op volgorde komma-gescheiden schaduwen, met de eerste erbovenop Elke laag is goedkoop, en twee of drie samen lezen als echte diepte op een manier dat geen enkele schaduw dat kan, hoe je het ook afstemt Dit is precies waarom de generator is opgebouwd rond lagen in plaats van een enkele set schuifregelaars - de CSS-doosschaduwgenerator schepen met presets zoals Card, Elevated en Floating die allemaal uit meerdere lagen bestaan, dus je vertrekt vanuit een realistische basis in plaats van vanuit een eenzame klodder.
Het mentale model dat ik gebruik: denk in elevatieniveaus Een rustkaart zit laag met een kleine, strakke schaduw Een dropdown of popover zit hoger met een grotere, zachtere Een modal zit het hoogst van allemaal Verhogen van elevatie betekent het verhogen van de Y offset en vervaging over alle lagen samen, niet alleen het verduisteren van één schaduw.
Hoe creëer ik een innerlijke schaduw?
de inset trefwoord draait een schaduw binnen het element' s opvulvak in plaats van het naar buiten te werpen Toevoegen inset naar voren een schaduwverklaring en het schildert binnenin het element
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
Binnenschaduwen zijn hoe je een besturing er ingedrukt, verzonken of ingekerfd laat uitzien Een tekstinvoer leest vaak beter met een subtiele ingezette schaduw die suggereert dat de tekst in een put zit. Een ingedrukte knopstatus kan de buitenste schaduw verwisselen zodat een binnenste fysiek depressief aanvoelt. En de hele neumorfismetrend is gebaseerd op het koppelen van een lichte inzet vanuit de ene richting met een donkere inzet vanuit de andere. In de generator is de inzet een enkele schakelaar per laag, zodat je de inzet kunt mengen en schaduwen in hetzelfde element kunt beginnen - wat precies is wat neumorfe oppervlakken nodig hebben.
Hoe gebruik ik de Box Shadow Generator?
De flow is ontworpen om te matchen met hoe ik eigenlijk werk Open de CSS-doosschaduwgenerator en je landt op een voorbeeldelement met een realistische kaartvoorinstelling die al is toegepast, zodat je nooit naar een leeg canvas staart.
Kies een voorinstelling om dicht bij wat je wilt te komen - Subtiel, Kaart, Verhoogd, Zwevend, Binnen, Glow, Neumorf of Scherp. Elk laadt zijn stapel met volledige lagen. Selecteer vervolgens een laag en stem deze af met de schuifregelaars: offset X, offset Y, vervaging en spreiding hebben elk hun eigen controle, plus een kleurenkiezer, een opaciteitsschuifregelaar en de inzetschakelaar. De preview-updates leven terwijl je sleept, dus je geeft de schaduw direct vorm in plaats van cijfers te bewerken en je het resultaat voor te stellen.
Als je meer diepte nodig hebt, voeg dan een laag toe Als een laag niets nuttigs doet, verwijder deze dan Er is een achtergrondschakelaar die de preview tussen licht en donker schakelt, wat belangrijk is omdat een schaduw die er perfect uitziet op een lichtkaart kan verdwijnen of kan veranderen in een lelijke grijze ring op een donkere. Beide controleren voordat u verzendt, bespaart een retourvlucht.
Als je gelukkig bent, kopieer dan de CSS. Je kunt de vlakte pakken box-shadow declaratie, of een blok dat ook de -webkit-box-shadow prefix als je heel oude WebKit builds moet ondersteunen Plak het in je stylesheet, je gestylede component, of je Tailwind willekeurige waarde en je bent klaar.
Zoals elke tool op de site draait het volledig in uw browser Niets wordt geüpload en het blijft offline werken zodra het is geladen, wat dezelfde client-side benadering is die ik beschrijf in de Gids voor gegevensprivacy.
Gebruiksscenario's uit de echte wereld
Het bouwen van een hoogteschaal voor een ontwerpsysteem
Wanneer ik een nieuw project opzet, definieer ik een vaste set hoogte-niveaus in plaats van dat elk onderdeel zijn eigen schaduw laat uitvinden Meestal is dat vier of vijf stappen van "rustkaart" tot & quot; modal." Ik bouw ze allemaal in de generator, kopieer de CSS, en laat ze als benoemde waarden in mijn ontwerptokens vallen Elke kaart, elk menu en dialoog verwijst dan naar een niveau, dus het hele product deelt een consistent verlichtingsmodel Dit met de hand doen in een teksteditor is ellendig; het doen met een live preview duurt een paar minuten.
Een kaart daadwerkelijk laten zweven
Het standaard instinct is een enkele donkere schaduw, die er geplakt op lijkt De fix is het recept met twee lagen: een strakke laag met een kleine Y offset en negatieve spreiding om de kaart te verankeren, en een bredere, zachtere laag eronder voor omgevingslicht Begin vanaf de Card of Elevated preset, duw de waarden naar smaak, en je krijgt een kaart die leest als opgetild in plaats van omlijnd.
Het ontwerpen van geperste en gerichte toestanden
Interactieve feedback leeft vaak in de schaduw Een knop kan het grootste deel van zijn buitenste schaduw verliezen en een kleine inzet op de pers krijgen om zich fysiek ingedrukt te voelen Een invoer kan een permanente subtiele inzet dragen om eruit te zien als een put Deze zijn snel te prototypen door de inzet om te schakelen en de preview te bekijken, en ze voegen veel waargenomen glans toe voor heel weinig code.
Neumorfe oppervlakken
Als je voor de soft-UI look gaat, heb je twee schaduwen nodig op hetzelfde element die in tegengestelde richting wijzen - een donkere van rechts naar beneden en een lichte van links naar boven - zodat het oppervlak geëxtrudeerd lijkt vanaf de achtergrond De Neumorphic preset zet dit op, en je stemt de kleur, dekking en onscherpte af op je specifieke achtergrond.Het werkt alleen op achtergronden die noch puur wit noch puur zwart zijn, wat de donkere achtergrondschakelaar je helpt controleren.
box-schaduw versus filter: drop-schaduw
Een vraag die ik vaak krijg: wanneer moet ik gebruiken filter: drop-shadow() in plaats van box-shadow? ze lijken op elkaar, maar gedragen zich anders, en het kiezen van de verkeerde veroorzaakt echte bugs.
| gelaatstrek | doosschaduw | filter: drop-shadow() |
|---|---|---|
| Volgt | De rechthoekige randdoos | De daadwerkelijk zichtbare (niet-transparante) pixels |
| het beste voor | Kaarten, knoppen, panelen, ingangen | Logo's, pictogrammen, PNG's met transparantie, onregelmatige vormen |
| Ondersteunt inzet | ja | heel weinig |
| Ondersteunt spreiding | ja | heel weinig |
| Meerdere schaduwen | Ja, komma-gescheiden | Ja, door filters te ketenen |
| Beïnvloedt lay-out | heel weinig | heel weinig |
De korte versie: voor een normaal rechthoekig element, gebruik box-shadow - het is capabeler, het ondersteunt spreiding en inzet, en het is wat deze generator produceert Bereik voor drop-shadow() alleen als je de schaduw nodig hebt om een transparante of onregelmatige vorm te traceren, zoals een logo of een uitsparingspictogram, waar een rechthoekige schaduw er verkeerd uit zou zien.
Geavanceerde tips en vallen
Een paar dingen waar ik door verbrand ben Eerst worden schaduwen geknipt overflow: hidden op een voorouder Als je mooie schaduw op mysterieuze wijze wordt afgesneden, knipt een voorouder hem af - geef de schaduw kamer of verplaats de overflow regel elders. Omdat box-shadow het heeft nooit invloed op de lay-out, het duwt geen aangrenzende elementen, wat een kenmerk is, maar het betekent ook dat een schaduw zich stilletjes onder een broer of zus kan uitstrekken.
Ten tweede kunnen enorme vervagingen op veel elementen verfprestaties kosten, vooral als ze geanimeerd zijn. Als je een schaduw op de scroll animeert of over een lange lijst zweeft, bekijk dan je framesnelheid; soms is het goedkoper om ondoorzichtigheid te animeren op een pseudo-element dat een statische schaduw vasthoudt. Zodra uw CSS is afgerond, voert u deze door de CSS-minifier scheert de extra bytes die uitgebreide meerlaagse schaduwen toevoegen.
Ten derde, vergeet niet dat schaduwkleur meer kan zijn dan zwart Een zeer subtiel getinte schaduw - een donkere versie van je oppervlak' s tint in plaats van puur zwart - ziet er vaak rijker uit dan neutraal grijs, omdat echte schaduwen omgevingskleur oppikken Het is een kleine zet met een onevenredige uitbetaling.
Als u een bredere CSS-toolkit assembleert, zal de Handleiding voor webontwikkelaars omvat waar schaduwwerk past tussen de andere browsergebaseerde hulpprogramma's, en zodra uw schaduwen klaar zijn, zal de Gradiëntgenerator en kleurenkiezer rond de oppervlaktestyling af Als je aan toegankelijkheid denkt, combineer dit dan met de Kleurcontrast checker de inhoud op uw schaduwkaarten blijft dus leesbaar.
FAQ
Wat is de eigenschap CSS Box-Shadow?
box-shadow voegt een of meer schaduwen toe rond een element' s frame Elke schaduw neemt een horizontale offset, een verticale offset, een optionele vervagingsradius, een optionele spreidingsradius en een kleur, met een optioneel inzetzoekwoord om de schaduw in het vak te tekenen Meerdere schaduwen worden gescheiden door komma's en geschilderd met de eerste bovenaan.
Wat is het verschil tussen onscherpte en verspreiding?
Vervagingsradius verzacht de schaduwrand, dus een grotere waarde maakt het diffuser Verspreidingsradius verandert de schaduw' s grootte voordat het vervaagt: een positieve spreiding laat het in alle richtingen groeien, terwijl een negatieve spreiding het verkleint, en zo houd je een schaduw strak onder een kaart in plaats van langs de randen te bloeden.
Hoe maak ik een innerlijke schaduw in CSS?
Voeg het instelzoekwoord toe aan de schaduw.inzet tekent de schaduw binnenin het element' s opvulvak in plaats van buiten, wat handig is voor ingedrukte knoppen, invoerputten en neumorfe oppervlakken. Door de instelschakelaar in de generator om te schakelen, wordt deze automatisch aan de geselecteerde laag toegevoegd.
Kan ik meerdere box-shadows op één element gebruiken?
Ja. je kunt verschillende schaduwen opsommen in een enkele dooskaduwverklaring, gescheiden door komma's, en de browser schildert ze in volgorde met de eerste bovenaan. Het aanbrengen van een zachte, brede schaduw onder een kleinere, donkerdere schaduw is de standaardmanier om de hoogte er realistisch uit te laten zien in plaats van erop te plakken.
Waarom wordt mijn box-shadow geknipt?
Een schaduw wordt afgesneden wanneer een voorouder overflow heeft: verborgen of wanneer het element aan de rand van een knipcontainer zit Geef de schaduwruimte, of verplaats de overflow: verborgen regel naar een ander element Omdat box-shadow geen invloed heeft op de lay-out, duwt het nooit aangrenzende elementen, zodat het ook geruisloos kan uitschuiven onder een broer of zus.
Wat is het verschil tussen box-shadow en filter: drop-shadow?
box-shadow volgt het element' s rechthoekige randdoos, dus het negeert transparante gebieden binnen een PNG of een onregelmatige vorm. filter: drop-shadow () traceert de daadwerkelijke zichtbare pixels, wat past bij logo's en pictogrammen met transparantie Voor standaard rechthoekige kaarten en knoppen is box-shadow de juiste keuze en ondersteunt spread en inset die drop-shadow niet.
Heb ik nog steeds het voorvoegsel -webkit- voor box-shadow nodig?
Voor moderne browsers, nee. box-shadow is al vele jaren niet geprefixed en wordt breed ondersteund Het prefixed blok dat de generator kan uitvoeren is alleen handig als u zeer oude WebKit-builds moet ondersteunen, en voor de meeste projecten is alleen de standaard box-shadow-eigenschap voldoende.
Verstuurt deze box-shadow-generator mijn gegevens ergens heen?
heel weinig . De preview- en CSS-uitvoer worden volledig gegenereerd in uw browser met JavaScript. Er worden geen waarden geüpload of opgeslagen en de tool blijft werken zonder netwerkverbinding nadat de pagina is geladen.
