Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Legge til Skygger for Dybde og Kontrast | Kjernekonsepter og Grunnleggende Styling
Tailwind CSS for Webbutvikling

bookLegge til Skygger for Dybde og Kontrast

Tailwind CSS tilbyr et utvalg verktøy for å legge til skygger på elementer.

Boksskygger

Bruk prefikset shadow- etterfulgt av størrelsesverdien for å legge til boksskygger.

index.html

index.html

copy

Tekstskygger

Tailwind CSS inkluderer ikke text-shadow-verktøy som standard. Du kan imidlertid enkelt legge til egendefinerte text-shadow-verktøy i Tailwind-konfigurasjonsfilen ved behov.

Merk

Hvis du trenger å fordype deg i spesifikke Tailwind-skygger, vennligst se dokumentasjonen: Box Shadow.

Eksempel

Her er et praktisk eksempel på bruk av grunnleggende styling (farger, kanter, skygger) ved hjelp av verktøyene vi har lært.

index.html

index.html

copy

Forklaring

  1. max-w-sm: Angir maksimal bredde på elementet til liten størrelse (24rem eller 384px);
  2. mx-auto: Sentrerer elementet horisontalt ved å bruke auto marger på venstre og høyre side;
  3. p-4: Legger til polstring på 1rem (16px) på alle sider;
  4. bg-white: Setter bakgrunnsfargen til hvit;
  5. rounded-lg: Bruker store avrundede hjørner på elementet;
  6. shadow-md: Legger til en middels boks-skygge på elementet.
  1. text-2xl: Angir skriftstørrelsen til 2xl (1.5rem eller 24px);
  2. font-bold: Bruker fet skriftvekt;
  3. text-gray-900: Angir tekstfargen til en svært mørk grå (nesten svart);
  4. mb-2: Legger til en bunnmarg på 0.5rem (8px);
  5. text-gray-700: Angir tekstfargen til en middels grå;
  6. mb-4: Legger til en bunnmarg på 1rem (16px).
  1. border: Legger til en kantlinje rundt elementet;
  2. border-blue-500: Angir kantlinjefargen til en blå nyanse;
  3. rounded-md: Bruker middels avrundede hjørner på elementet;
  4. p-4: Legger til polstring på 1rem (16px) på alle sider;
  5. bg-blue-50: Angir bakgrunnsfargen til en svært lys blå;
  6. text-blue-700: Angir tekstfargen til en mørk blå.
  1. mt-4: Legger til en toppmarg på 1rem (16px);
  2. p-4: Legger til polstring på 1rem (16px) på alle sider;
  3. bg-green-100: Angir bakgrunnsfargen til en svært lys grønn;
  4. border: Legger til en kantlinje rundt elementet;
  5. border-green-500: Angir kantlinjefargen til en grønn nyanse;
  6. rounded: Bruker små avrundede hjørner på elementet;
  7. shadow-sm: Bruker en liten boks-skygge på elementet;
  8. text-green-700: Angir tekstfargen til en mørk grønn.
question mark

Hvilken klasse brukes for å legge til en middels skygge på et element?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 5

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 3.57

bookLegge til Skygger for Dybde og Kontrast

Sveip for å vise menyen

Tailwind CSS tilbyr et utvalg verktøy for å legge til skygger på elementer.

Boksskygger

Bruk prefikset shadow- etterfulgt av størrelsesverdien for å legge til boksskygger.

index.html

index.html

copy

Tekstskygger

Tailwind CSS inkluderer ikke text-shadow-verktøy som standard. Du kan imidlertid enkelt legge til egendefinerte text-shadow-verktøy i Tailwind-konfigurasjonsfilen ved behov.

Merk

Hvis du trenger å fordype deg i spesifikke Tailwind-skygger, vennligst se dokumentasjonen: Box Shadow.

Eksempel

Her er et praktisk eksempel på bruk av grunnleggende styling (farger, kanter, skygger) ved hjelp av verktøyene vi har lært.

index.html

index.html

copy

Forklaring

  1. max-w-sm: Angir maksimal bredde på elementet til liten størrelse (24rem eller 384px);
  2. mx-auto: Sentrerer elementet horisontalt ved å bruke auto marger på venstre og høyre side;
  3. p-4: Legger til polstring på 1rem (16px) på alle sider;
  4. bg-white: Setter bakgrunnsfargen til hvit;
  5. rounded-lg: Bruker store avrundede hjørner på elementet;
  6. shadow-md: Legger til en middels boks-skygge på elementet.
  1. text-2xl: Angir skriftstørrelsen til 2xl (1.5rem eller 24px);
  2. font-bold: Bruker fet skriftvekt;
  3. text-gray-900: Angir tekstfargen til en svært mørk grå (nesten svart);
  4. mb-2: Legger til en bunnmarg på 0.5rem (8px);
  5. text-gray-700: Angir tekstfargen til en middels grå;
  6. mb-4: Legger til en bunnmarg på 1rem (16px).
  1. border: Legger til en kantlinje rundt elementet;
  2. border-blue-500: Angir kantlinjefargen til en blå nyanse;
  3. rounded-md: Bruker middels avrundede hjørner på elementet;
  4. p-4: Legger til polstring på 1rem (16px) på alle sider;
  5. bg-blue-50: Angir bakgrunnsfargen til en svært lys blå;
  6. text-blue-700: Angir tekstfargen til en mørk blå.
  1. mt-4: Legger til en toppmarg på 1rem (16px);
  2. p-4: Legger til polstring på 1rem (16px) på alle sider;
  3. bg-green-100: Angir bakgrunnsfargen til en svært lys grønn;
  4. border: Legger til en kantlinje rundt elementet;
  5. border-green-500: Angir kantlinjefargen til en grønn nyanse;
  6. rounded: Bruker små avrundede hjørner på elementet;
  7. shadow-sm: Bruker en liten boks-skygge på elementet;
  8. text-green-700: Angir tekstfargen til en mørk grønn.
question mark

Hvilken klasse brukes for å legge til en middels skygge på et element?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 5
some-alt