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

Suggested prompts:

Can you explain how to add custom text-shadow utilities in Tailwind?

What are the different box shadow sizes available in Tailwind?

Can you break down the example code for these styles?

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