CSS-egenskaben box-shadow og dens parametre
CSS-egenskaben box-shadow bruges til at kaste en eller flere skygger fra et element på en webside. For at kunne styre skyggens udseende præcist, arbejder man med en række specifikke parametre, som definerer skyggens placering, skarphed og størrelse i forhold til elementet.
- Vandret forskydning: Denne værdi flytter skyggen vandret. En positiv værdi flytter skyggen til højre, mens en negativ værdi flytter den til venstre. Værktøjet tillader justering fra -50px til 50px.
- Lodret forskydning: Denne værdi bestemmer skyggens lodrette placering. En positiv værdi flytter skyggen nedad, og en negativ værdi flytter den opad. Området går fra -50px til 50px.
- Sløring (Blur): Denne parameter bestemmer, hvor uskarpe og bløde skyggens kanter skal være. En værdi på 0px giver en helt skarp kant, mens højere værdier op til 100px spreder farven ud i en blød overgang.
- Spredning (Spread): Denne indstilling definerer, om skyggen skal vokse eller krympe, før sløringen anvendes. En positiv værdi udvider skyggen i alle retninger, mens en negativ spredning trækker skyggen indad. Dette er særligt nyttigt til at skabe en tæt, tætsiddende skygge, der ikke stikker for langt ud fra elementets fysiske rammer. Værktøjet understøtter værdier fra -50px til 50px.
Forskellen på udvendige og indvendige skygger
En standard skygge kastes uden for elementets grænser, hvilket får elementet til at fremstå som om, det svæver over baggrunden. Dette bruges ofte til at skabe visuelt løftede elementer som kort eller knapper.
Hvis man aktiverer Indvendig skygge (Inset), vendes effekten om. Skyggen kastes nu på indersiden af elementets ramme. Dette ændrer den visuelle opfattelse fuldstændigt, så elementet i stedet fremstår nedsænket eller presset ind i overfladen. Denne teknik anvendes hyppigt til at designe dybe inputfelter, formularer eller knapper i en aktiveret eller trykket tilstand.
Opbygning af dybde med flere skyggelag
En enkelt skygge kan ofte virke flad og kunstig, hvis den strækkes over et stort område. For at opnå et realistisk og organisk udtryk, kan man stable flere skyggelag oven på hinanden.
Ved at kombinere forskellige lag kan man simulere komplekse lysforhold. Man kan eksempelvis definere et tæt, mørkt lag tæt på elementet for at markere den umiddelbare kontakt med overfladen, og derefter tilføje et blødere, bredere lag med højere sløring og lavere uigennemsigtighed for at simulere det omgivende, diffuse lys.
Værktøjet pre-render fem lag, hvor det første lag har standardværdierne 0 8 24 -4 og en 18% gennemsigtig sort farve, mens de øvrige lag indledningsvist er skjult. Du kan tilføje nye lag med standardværdier eller fjerne eksisterende lag efter behov for at opbygge den ønskede dybde. Når der benyttes flere lag, adskilles de enkelte skyggers værdier med kommaer i den genererede CSS-kode.
Værktøjets funktioner og grænseflade
Når du arbejder i generatoren, justerer du skyggens egenskaber via en række skydere og knapper, som opdaterer CSS-koden i realtid. Grænsefladen indeholder følgende elementer:
- Skyggelag: En sektion, der viser de aktuelle lag, du arbejder på.
- Tilføj lag: Opretter et nyt skyggelag med standardværdier.
- Fjern lag: Sletter det valgte skyggelag fra listen.
- Vandret forskydning: Justerer skyggens position på x-aksen.
- Lodret forskydning: Justerer skyggens position på y-aksen.
- Sløring (Blur): Kontrollerer blødheden af skyggens kant.
- Spredning (Spread): Justerer skyggens fysiske størrelse før sløring.
- Skyggefarve: En farvevælger til at definere skyggens farvetone.
- Uigennemsigtighed (Opacity): Bestemmer, hvor transparent skyggen skal være.
- Indvendig skygge (Inset): En omskifter, der flytter skyggen ind i elementet.
Den genererede kode præsenteres under overskriften CSS, hvor du hurtigt kan klikke på Kopier CSS for at overføre koden direkte til dit projekt.
Behandling af data og privatliv
Når du designer dine skygger, sker al databehandling lokalt på din egen enhed. Hver skygge renderes i din browser. Intet af det, du indstiller her, uploades til BroBroGo.
Ofte stillede spørgsmål
Hvad styrer forskydning, sløring og spredning egentlig?
Forskydning (offset) flytter skyggen til venstre/højre og op/ned, sløring (blur) gør kanterne blødere, og spredning (spread) gør skyggen større eller mindre før sløringen. En negativ spredning trækker skyggen indad, hvilket er nyttigt til en tæt, tætsiddende skygge.
Hvad gør indstillingen inset?
En normal skygge falder uden for elementet, ligesom lyset bag et hævet kort. Inset vender skyggen indad i stedet, så elementet ser nedsænket ud — praktisk til dybe inputfelter eller trykkede knapper.
Hvorfor stable mere end ét skyggelag?
En enkelt skygge ser flad ud, når den når en vis størrelse. Realistisk dybde kombinerer normalt en tæt, mørk skygge med en blød, bredere skygge — tilføj et ekstra lag og juster dem uafhængigt af hinanden for at opnå den effekt.