Datavju
Logg innSe ditt eget resultat
Velg språk
Datavju
Logg innSe ditt eget resultat
Velg språk

Styles

Styles lagrer et utseende du kan bruke på flere elementer i en Page eller Component. Bruk en delt Style for gjentatte overskrifter, kort, knapper eller oppsett, slik at én endring oppdaterer utseendet deres samlet.

Slik fungerer Styles

En Style inneholder innstillinger som Color, Padding og Display. Legg den på elementene som skal bruke innstillingene, og rediger stilen for å endre dem samlet. Legg en egenskap direkte på et element når bare det elementet trenger endringen.

Et Design System i Definitions gir navn til delte designvalg, som en profilfarge eller en avstandsstørrelse. Disse navngitte valgene kalles tokener. Velg dem i en Style når du vil bruke de samme valgene flere steder. Endringer lagres automatisk. Vent til Saving changes… forsvinner. Hvis Changes not saved. vises, retter du feilen og velger Retry.

Lag og legg til en Style

Lag én Style og legg den på alle elementene som skal dele utseendet.

  1. Åpne siden eller komponenten og velg Styles i venstre verktøylinje.
  2. Hold pekeren over roten i Styles, åpne menyen med tre prikker og velg Add Style.
  3. Velg My Style og skriv et beskrivende navn, som Accent heading, i tittelfeltet på egenskapspanelet.
  4. Sett Style Type til CSS Class. Nye Styles starter på Select Style Type. Velg en type før du forventer en effekt.
  5. Bruk plusstegnet ved Properties for å legge til Color, Font Size og Font Weight. Skriv #2457a6, 24px og 600.
  6. Åpne Components og velg et overskriftselement. Bruk plusstegnet ved Properties, velg Styles-kategorien og velg Accent heading.
  7. Legg samme Style på en annen overskrift. Begge overskriftene bruker nå samme farge, størrelse og tykkelse. Åpne Styles igjen for å endre den delte definisjonen.
CSS Class-stilen Accent heading lagt på begge produktoverskriftene i eksempelkatalogen.

Velg Style Type og hvilke elementer stilen skal gjelde

Når du endrer Style Type, fjernes velgerinnstillingene fra den forrige typen. Legg til stilen ved å velge det lesbare navnet i egenskapsutforskeren.

  • Style Type — CSS Class: Lager delt CSS som brukes gjennom en klasse. Velg dette for pekereffekter, tastaturfokus, responsive regler eller velgere. Ingen type er valgt når en Style opprettes.
  • Style Type — Inline Style: Legger CSS-innstillingene direkte på hvert tilkoblet element. Velg dette for et enkelt sett med verdier du vil bruke flere steder. Kontrollene for CSS-tilstander og velgere hører til CSS Class-stiler.
  • Use Descendant Selectors: Av fra start. Aktiver det og skriv Selectors som p for å utforme avsnitt inni hvert tilkoblet element. La det være av for å utforme selve elementet.
  • Use Structural Selector: Av fra start. Aktiver det for å legge til en Structural Selector som :first-child når bare elementet i denne strukturposisjonen skal omfattes. Kontroller den genererte velgeren og elementene den gjelder.
  • Use Pseudo-Element: Av fra start. Aktiver det for å velge et Pseudo-Element som ::before. Legg til Content (style) hvis pseudoelementet skal lage tekst eller en tom dekorativ boks.

Skriv verdier og bruk designtokener

Legg bare til egenskapene du trenger. En ny egenskap starter tom hvis ingen startverdi er oppgitt nedenfor. Elementet beholder stilene fra nettleseren, elementet over og andre regler som gjelder. Fjern egenskapen når du vil at disse reglene skal bestemme verdien igjen.

Nedtrekkslister tilbyr de navngitte CSS-verdiene i referansen nedenfor og Custom Value for en annen gyldig CSS-verdi. Tekstfelt godtar vanlig CSS-syntaks med enheter. Bruk 24px for en størrelse, 1.5 for linjehøydeforhold eller repeat(2, minmax(0, 1fr)) for gitterkolonner. En verdi nettleseren ikke kan tolke, gir ingen CSS-effekt.

Bruk palettkontrollen ved en støttet egenskap for å velge et token fra Design System. En fargeegenskap tilbyr fargetokener, og en størrelsesegenskap tilbyr dimensjonstokener. Egenskapen følger det navngitte valget når det endres. Bruk knappen for å fjerne koblingen før du skriver en fast verdi i stedet. Velg Show Data Settings eller Show Variable Settings når en støttet egenskap skal bruke et tabellfelt eller en midlertidig sideverdi.

Legg til tilstander for samhandling og skjermstørrelse

Bruk CSS Class-tilstander for å endre utseende under samhandling eller ved en bestemt visningsstørrelse.

  1. Velg en Style av typen CSS Class og deretter Add States.
  2. Åpne menyen med tre prikker ved States og aktiver tilstanden du trenger.
  3. Velg tilstanden i listen og legg til CSS-innstillingene. Default State er fortsatt grunnoppsettet.
  4. Test den faktiske handlingen i Preview. At du velger en tilstand for redigering, betyr ikke at den besøkende holder pekeren over elementet eller har satt fokus på det.
  5. Med et valgt Design System velger du Style named breakpoint og Add breakpoint state for en responsiv overstyring. Uten et Design System velger du Media og konfigurerer Query. Se Responsive for hele fremgangsmåten.

Tilstander for samhandling

Velg en tilstand for samhandlingen eller visningsbetingelsen du vil utforme.

  • Hover: Gjelder mens en pekeenhet holdes over elementet. Bruk det for å endre bakgrunnen på en knapp. Behold en tilsvarende markering ved tastaturfokus.
  • Active: Gjelder under aktivering, som når en museknapp holdes nede. Det betyr ikke den nåværende siden i navigasjonen.
  • Focus: Gjelder mens elementet har fokus. Bruk det for en kant eller ramme rundt et inndatafelt.
  • Focus visible: Gjelder når nettleseren vurderer at en synlig fokusmarkering trengs, blant annet ved tastaturnavigasjon. Bruk Outline fremfor å fjerne fokusmarkeringen.
  • Disabled: Gjelder deaktiverte kontroller. Utformingen av en knapp deaktiverer den ikke i seg selv. Angi også kontrollens faktiske Disabled-egenskap.
  • Invalid: Gjelder et element merket aria-invalid="true". Bruk det sammen med kontrollens valideringsmelding. Stilen alene utfører ingen validering.
  • Selected: Gjelder valgte kontroller som bruker utvalgsattributtene sine. Det er et eget valg, adskilt fra en lenke til nåværende side.
  • Current page: Utformer Links med nøyaktig den nåværende siden som mål. Spørringsstrenger, fragmenter og avsluttende skråstreker endrer ikke dette treffet. Overordnede stier regnes ikke automatisk som nåværende side.

Gjenbruk, kopier og fjern Styles

Legg til en eksisterende Style ved navn fra Styles-kategorien i egenskapsutforskeren. For å fjerne en tilkobling fjerner du denne Style-egenskapen fra det valgte elementet. Kildestilen er fortsatt tilgjengelig for de andre elementene.

Bruk Copy og Paste i Styles-treet når du vil ha en selvstendig definisjon. Bruk en tilkobling fra Style Library når målet skal fortsette å bruke en Style du har tilgang til. Senere endringer i en kopi er uavhengige. En tilkoblet stil trenger fortsatt tilgang til kilden. Gjenbrukbare Components kan ha egne Styles og eget Design System.

Eksempler

Del ett utseende mellom overskrifter, legg fokusmarkering på knapper eller velg avsnittene inni et kort.

Eksempel: to produktoverskrifter

Start med overskriftene Desk lamp og Pendant lamp med nettleserens vanlige overskriftsutseende. Lag Accent heading med Color #2457a6, Font Size 24px og Font Weight 600. Legg den deretter på begge overskriftene. Begge blir blå overskrifter på 24 piksler. Når du endrer delt Color, endres begge uten at du redigerer teksten, prisene eller produktradene.

Eksempel: en knapp tilgjengelig med tastaturet

Lag en CSS Class-stil som heter Primary button. Legg til Background Color #2457a6, Color white og Padding 12px 20px i Default State. Legg stilen på en Button, aktiver Hover og angi en mørkere Background Color. Aktiver Focus visible og legg til Outline 3px solid #ffbf47 og Outline Offset 3px. Hold pekeren over knappen i Preview, flytt den bort og bruk deretter Tab for å gå til knappen. Hover-fargen forsvinner, mens tastaturrammen er synlig så lenge knappen har fokus.

Eksempel: avsnitt inni et kort

Lag Card copy som CSS Class, aktiver Use Descendant Selectors og sett Selectors til p. Legg til Color #475569 og Line Height 1.5. Legg deretter stilen på kortets Div. Avsnittene får dette utseendet. Kortets overskrift og det lagrede innholdet er uendret. Uten velgeren for underliggende elementer gjelder CSS-innstillingene selve kortet. Vanlig CSS-arv bestemmer da hva elementene under får.

Referanse for CSS-egenskaper

Nye, valgfrie CSS-innstillinger starter tomme. Legg til en verdi når elementet trenger en overstyring. Ellers bruker nettleseren sitt vanlige CSS-resultat. Translate starter på 0px, og CSS Variables starter med en tom liste.

Oppsett og størrelser

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Aspect Ratio: Behold et forhold mellom bredde og høyde, for eksempel 16 / 9 for et mediekort.
  • Box Sizing: Velg hvordan bredde og høyde inkluderer innvendig avstand og kanter. Border Box holder et kort med innvendig avstand innenfor den angitte bredden. Valg: Content Box (default), Border Box.
  • Display: Velg oppsettet: grid for spor, flex for en rad eller kolonne med elementer, eller none for å skjule elementet og plassen det tar. Valg: block, flex, grid, inline-flex, flow-root, inline, inline-block, none.
  • Position: Velg posisjoneringen. Relative beholder vanlig flyt. Absolute plasserer elementet inni et overordnet element. Fixed forankrer det til visningsområdet. Sticky fester det under rulling. Valg: Static (default), Relative, Absolute, Fixed, Sticky.
  • Inset: Angi top, right, bottom og left samlet, for eksempel 0 for å fylle et posisjonert overordnet element.
  • Top: Plasser et element ut fra øvre kant på boksen det ligger i, for eksempel 16px.
  • Right: Plasser et element ut fra høyre kant på boksen det ligger i, for eksempel 16px.
  • Bottom: Plasser et element ut fra nedre kant på boksen det ligger i, for eksempel 16px med posisjoneringen Absolute.
  • Left: Plasser et element ut fra venstre kant på boksen det ligger i, for eksempel 16px.
  • Width (style): Angi elementets bredde, for eksempel 100% inni et kort.
  • Height (style): Angi elementets høyde, for eksempel 240px for en bildeboks.
  • Min Width: Hold elementet minst så bredt. Bruk 0 når et element inni flex eller grid skal kunne bli smalere enn tekstens naturlige bredde.
  • Max Width: Begrens elementets bredde, for eksempel 72rem for innholdet på en side.
  • Min Height: Hold elementet minst så høyt, for eksempel 320px for en toppseksjon.
  • Max Height: Begrens elementets høyde, for eksempel 400px for en liste som kan rulles.
  • Float: Legg et element til venstre eller høyre når tekst skal flyte ved siden av det. Valg: Left, Right.
  • Object Fit: Tilpass et bilde eller en video i boksen sin. Cover fyller boksen med beskjæring. Contain holder hele bildet synlig. Valg: Contain, Cover, Fill, None, Scale Down.
  • Object Position: Velg hvilken del av tilpasset innhold som skal være sentrert, for eksempel center top for et portrett.
  • Overflow: Velg hvordan innhold som går utenfor en av aksene, skal vises. Auto tillater rulling ved behov. Valg: Visible (default), Hidden, Clip, Scroll, Auto.
  • Overflow X: Styr innhold som går utenfor horisontalt, for eksempel auto for en bred tabell.
  • Overflow Y: Styr innhold som går utenfor vertikalt, for eksempel auto på en liste med begrenset høyde. Valg: Visible (default), Hidden, Clip, Scroll, Auto.
  • Resize: Tillat at brukeren endrer størrelse der elementet og Overflow-innstillingene støtter det, for eksempel vertical på et tekstområde.
  • Scroll Behavior: Velg rulleoppførsel, for eksempel smooth for navigasjon til et anker.
  • Scroll Padding Top: Reserver plass over et mål du ruller til, for eksempel 72px under en fastklebet toppmeny.
  • Z-Index: Angi lagrekkefølge der elementene støtter det, for eksempel 10 på en posisjonert nedtrekksmeny.

Avstander

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Margin: Angi avstand utenfor elementet, for eksempel 0 auto for å sentrere en blokk med begrenset bredde.
  • Margin Top: Angi utvendig avstand over elementet, for eksempel 32px før en seksjon.
  • Margin Right: Angi utvendig avstand til høyre, for eksempel 12px ved siden av en etikett.
  • Margin Bottom: Angi utvendig avstand under elementet, for eksempel 24px etter et avsnitt.
  • Margin Left: Angi utvendig avstand til venstre, for eksempel 12px ved siden av et ikon.
  • Padding: Angi innvendig avstand innenfor alle kanter, for eksempel 24px for et kort eller 12px 20px for en knapp.
  • Padding Top: Angi innvendig avstand øverst, for eksempel 24px.
  • Padding Right: Angi innvendig avstand til høyre, for eksempel 24px.
  • Padding Bottom: Angi innvendig avstand nederst, for eksempel 24px.
  • Padding Left: Angi innvendig avstand til venstre, for eksempel 24px.
  • Gap: Angi avstand mellom rader og kolonner samlet, for eksempel 24px i et produktgitter.
  • Row Gap: Angi avstand mellom rader i flex- eller grid-oppsett, for eksempel 16px.
  • Column Gap: Angi avstand mellom kolonner i flex- eller grid-oppsett, for eksempel 24px.

Flex- og grid-oppsett

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Flex: Angi grow, shrink og basis samlet, for eksempel 1 1 240px på fleksible kort.
  • Flex Basis: Angi elementets startstørrelse langs hovedaksen, for eksempel 240px før det vokser eller krymper.
  • Flex Direction: Velg hovedretningen i en flex-beholder. Column plasserer skjemafelt under hverandre. Valg: Row (default), Row Reverse, Column, Column Reverse.
  • Flex Grow: Velg hvordan et element tar ledig plass, for eksempel 1 for et søkefelt som skal utvides.
  • Flex Shrink: Velg hvordan et element krymper når det er lite plass, for eksempel 0 for å beholde ikonets bredde.
  • Flex Wrap: La flex-elementer fortsette på en ny linje. Wrap hjelper en rad med kort å passe i et smalt visningsområde. Valg: No Wrap (default), Wrap, Wrap Reverse.
  • Align Content: Fordel linjer eller spor når beholderen har ekstra plass, for eksempel space-between.
  • Align Items: Plasser elementer på tvers av en flex- eller grid-beholder. Center sentrerer en rad med kontroller i høyden. Valg: Normal (default), Center, Start, End, Flex Start, Flex End.
  • Align Self: Overstyr ett elements plassering på tverraksen. Center kan plassere et ikon ved siden av høyere tekst. Valg: Normal (default), Center, Start, End, Self Start, Self End, Flex Start, Flex End.
  • Justify Content: Fordel elementer langs hovedaksen. Space Between plasserer første og siste element på hver sin kant. Valg: Normal (default), Start, Center, End, Flex Start, Flex End, Space Between, Space Around, Space Evenly.
  • Place Content: Angi align-content og justify-content samlet, for eksempel center i et gitter.
  • Order: Endre den synlige rekkefølgen til et flex/grid-element, for eksempel 1 for å plassere det etter elementer med den vanlige rekkefølgeverdien null.
  • Grid: Angi hele den forkortede grid-verdien når du trenger å definere spor og automatisk plassering samlet.
  • Grid Area: Plasser et element i et navngitt område som hero, eller angi rad- og kolonnegrenser som 1 / 1 / 2 / 3.
  • Grid Auto Columns: Angi størrelser for kolonner som opprettes automatisk, for eksempel minmax(160px, 1fr).
  • Grid Auto Flow: Velg hvordan automatisk plasserte elementer fyller gitteret. Row fyller rader, Column fyller kolonner, og Dense prøver å fylle hull. Valg: Row (default), Column, Dense, Row Dense, Column Dense.
  • Grid Auto Rows: Angi størrelser for rader som opprettes automatisk, for eksempel minmax(120px, auto).
  • Grid Column: Plasser et element over kolonner, for eksempel 1 / 3 for å dekke de to første sporene.
  • Grid Column Start: Velg startlinjen for kolonnen, for eksempel 1.
  • Grid Column End: Velg sluttlinjen for kolonnen, for eksempel 3.
  • Grid Row: Plasser et element over rader, for eksempel 1 / 3.
  • Grid Row Start: Velg startlinjen for raden, for eksempel 1.
  • Grid Row End: Velg sluttlinjen for raden, for eksempel 3.
  • Grid Template: Angi eksplisitte rader, kolonner og områder samlet når du trenger den forkortede CSS-verdien.
  • Grid Template Areas: Gi navn til gitterområdene, for eksempel "hero hero" "nav content".
  • Grid Template Columns: Angi kolonnespor, for eksempel repeat(2, minmax(0, 1fr)) for to like brede kolonner.
  • Grid Template Rows: Angi eksplisitte radspor, for eksempel auto 1fr auto for topp, innhold og bunn.

Tekst og lister

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Font: Angi den forkortede skriftverdien, for eksempel 600 24px/1.2 Arial, sans-serif.
  • Font Family: Velg skriftlisten, for eksempel Arial, sans-serif.
  • Font Size: Angi tekststørrelsen med enhet, for eksempel 24px for en kortoverskrift.
  • Font Style: Angi en skriftstil, for eksempel italic for et sitat.
  • Font Weight: Angi skriftens tykkelse, for eksempel 600 for en overskrift.
  • Letter Spacing: Juster avstanden mellom bokstaver, for eksempel 0.04em på en kort etikett.
  • Line Height: Angi linjeavstanden, for eksempel 1.5 for brødtekst.
  • Text Align: Juster innhold på en linje, for eksempel Center for en kort kortoverskrift. Valg: Start, End, Left, Right, Center, Justify, Justify-all, Match-parent.
  • Text Decoration: Angi den forkortede text-decoration-verdien, for eksempel underline solid for lenker.
  • Text Decoration Color: Angi dekorasjonsfargen separat, for eksempel #2457a6 for en understreking.
  • Text Decoration Line: Velg dekorasjonslinjen som skal tegnes, for eksempel underline.
  • Text Transform: Endre store og små bokstaver i visningen, for eksempel Uppercase på korte etiketter. Den lagrede ordlyden beholdes som skrevet. Valg: None (default), Capitalize, Uppercase, Lowercase, Full Width, Full Size Kana, Math Auto.
  • Text Underline Offset: Flytt en understreking bort fra tekstens grunnlinje, for eksempel 0.2em.
  • Text Overflow: Velg avkuttet tekst eller Ellipsis når en tekstboks med begrenset størrelse fylles. Valg: Clip (default), Ellipsis.
  • Overflow Wrap: La lange ord eller URL-er brytes over linjer, for eksempel anywhere i et smalt kort.
  • White Space: Velg hvordan mellomrom og linjeskift behandles. Normal bryter vanlig tekst over linjer. Pre Wrap bevarer linjeskift samtidig som teksten kan brytes. Valg: Normal (default), No Wrap, Pre, Pre Wrap, Pre Line, Break Spaces, Unset.
  • Vertical Align: Plasser et linjeelement eller en tabellcelle i høyden, for eksempel Middle for et ikon i en tekstlinje. Valg: Baseline, Bottom, Middle, Sub, Super, Text-top, Text-bottom, Top.
  • List Style: Angi den forkortede verdien for listemerker, for eksempel square inside.
  • List Style Type: Velg merket, som Decimal for nummererte trinn eller Disc for punktlister. Valg: Circle, Decimal, Decimal (leading zero), Disc, None, Roman (lowercase), Roman (uppercase), Square, Unset.
  • WebKit Font Smoothing: Velg et nettleserspesifikt hint for skriftvisning, for eksempel antialiased der det støttes.

Farger, bakgrunner og kanter

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Color: Angi tekstfarge, for eksempel #2457a6 for en overskrift.
  • Accent Color: Angi aksentfargen for støttede skjemakontroller, for eksempel #2457a6 på avkrysningsbokser.
  • Appearance: Velg kontrollens nettleserutseende. None fjerner det innebygde utseendet slik at du kan utforme den. Valg: None, Auto, Menulist Button, Textfield, Base Select.
  • Background: Angi hele bakgrunnen i én verdi, for eksempel #f8fafc. Bruk de enkelte bakgrunnskontrollene for en mer avgrenset endring.
  • Background Color: Angi en bakgrunnsfarge, for eksempel #f8fafc på et produktkort.
  • Background Image: Angi et bilde eller en fargeovergang, for eksempel linear-gradient(90deg, #fff, #e2e8f0).
  • Background Position: Plasser et bakgrunnsbilde, for eksempel center top.
  • Background Repeat: Gjenta et bakgrunnsbilde eller stopp gjentakelsen, for eksempel no-repeat for et bilde i en toppseksjon.
  • Background Size: Angi størrelsen på et bakgrunnsbilde, for eksempel cover for å fylle boksen.
  • Background Clip: Velg hvor bakgrunnen tegnes. Padding Box holder den innenfor kanten. Valg: Border Box (default), Padding Box, Content Box, Text, border-area.
  • Border: Angi alle kantene samlet, for eksempel 1px solid #cbd5e1.
  • Border Color: Angi kantfarger uten å endre bredde eller stil, for eksempel #94a3b8.
  • Border Top: Angi bare øvre kant, for eksempel 1px solid #cbd5e1 over en bunnseksjon.
  • Border Right: Angi bare høyre kant, for eksempel 1px solid #cbd5e1 på et sidepanel.
  • Border Bottom: Angi bare nedre kant, for eksempel 1px solid #cbd5e1 under en rad.
  • Border Left: Angi bare venstre kant, for eksempel 4px solid #2457a6 på en melding.
  • Border Bottom Color: Endre bare fargen på nedre kant, for eksempel #2457a6 for en aktiv fane.
  • Border Radius: Rund av alle hjørner, for eksempel 12px på et kort.
  • Border Top Left Radius: Rund av bare øvre venstre hjørne, for eksempel 12px.
  • Border Top Right Radius: Rund av bare øvre høyre hjørne, for eksempel 12px.
  • Border Bottom Left Radius: Rund av bare nedre venstre hjørne, for eksempel 12px.
  • Border Bottom Right Radius: Rund av bare nedre høyre hjørne, for eksempel 12px.
  • Border Collapse: Velg om kantene i tilstøtende tabellceller slås sammen. Collapse gir én felles linje. Valg: Collapse, Separate (default).
  • Outline: Tegn en ramme, for eksempel 3px solid #ffbf47 i Focus visible.
  • Outline Offset: Skill rammen fra elementet, for eksempel 3px rundt en knapp med fokus.
  • Box Shadow: Legg til en skygge, for eksempel 0 4px 12px #0002 på et kort.

Effekter og bevegelse

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Opacity: Angi gjennomsiktighet fra 0 til 1, for eksempel 0.5 for et nedtonet element.
  • Visibility: Velg Visible, Hidden eller Collapse. Hidden beholder plassen i oppsettet, noe som kan reservere plass til innhold. Valg: Visible (default), Hidden, Collapse, Unset.
  • Cursor: Velg pekerform, for eksempel pointer for et interaktivt element.
  • Pointer Events: Velg om elementet mottar pekerhendelser. None lar pekeren nå elementer bak det. Valg: Auto (default), None.
  • Clip Path: Beskjær til en form, for eksempel circle(50%) for en rund beskjæring.
  • Filter: Bruk et visuelt filter, for eksempel grayscale(1) på et bilde.
  • Translate: Flytt et element langs Translate X og Translate Y uten å endre oppsettet rundt. Begge starter på 0px. Velg et dimensjonstoken eller skriv et tall og en enhet for hver akse.
  • Transform: Bruk en CSS-transformasjon, for eksempel rotate(2deg).
  • Transform Origin: Velg punktet som en transformasjon virker rundt, for eksempel center top.
  • Transition: Animer en overgang mellom verdier, for eksempel background-color 150ms ease.
  • Transition Property: Velg hvilke egenskaper som skal ha en overgang, for eksempel opacity. Angi varigheten gjennom Transition ved behov.
  • Animation: Bruk navngitte nøkkelbilder og tidsinnstillinger, for eksempel fadeIn 200ms ease-out. Definer nøkkelbildene i Head.

SVG, generert innhold og verdier du kan gjenbruke

Velg egenskapen for endringen du trenger. Nye, valgfrie verdier starter tomme. Nettleseren beholder de andre reglene som allerede gjelder for elementet.

  • Fill: Angi fargen inni en SVG-form, for eksempel #2457a6.
  • Stroke: Angi konturfargen til en SVG-form, for eksempel #2457a6.
  • Content (style): Lag innhold i et pseudoelement, for eksempel en tom tekststreng i anførselstegn for en dekorativ ::before-boks.
  • CSS Variables: Definer navngitte CSS-verdier. Listen starter uten variabler. Legg til Name som --card-gap og Value 24px. Bruk deretter var(--card-gap) i en egnet egenskap.
  • Style: Velg en eksisterende navngitt Style fra Styles-kategorien. Bruk deretter pennen for å redigere den delte definisjonen eller krysset for å fjerne denne tilkoblingen.

Begrensninger og vanlige feil

En direkte CSS-innstilling på et element kan overstyre samme egenskap fra en CSS Class. Kontroller lokale verdier, tilkoblet Style, valgt tilstand og velgere før du legger til en ny overstyring. Når Style-tilkoblinger har lik CSS-spesifisitet, brukes tilkoblingene i Default State først. Betingede tilstander som gjelder, følger den angitte rekkefølgen. Tilkoblinger i en tilstand brukes i rekkefølgen du la dem til.

Plain Text inneholder selve teksten. Legg det inni et passende element når du trenger en boks, avstand, bakgrunn eller oppsett. En CSS Class, en valgt tilstand eller et skjult element endrer ikke tilgangen til Dataset eller hvem publiseringen er tilgjengelig for.

Åpne Preview etter en endring og åpne den lagrede siden på nytt for å kontrollere resultatet. Publiser på nytt for å vise det oppdaterte utseendet til besøkende. Rediger den delte kilden når alle tilkoblede brukssteder skal endres. Rediger en kopi for en selvstendig variant.

Bruk Design System for delte tokener, Responsive for regler om visningsstørrelse og Component for en gjenbrukbar utforming.

  • Design System: Godkjenn gjenbrukbare designtokener og navngitte bruddpunkter i Definitions.
  • States: Endre komponentegenskaper når betingelser er oppfylt.
  • Responsiv utforming: Tilpass én side til ulike visningsstørrelser.
  • Component: Gjenbruk struktur, utseende og oppførsel samlet.
  • Metadata for siden: Legg til innhold i dokumentets head og velgere på sidenivå.