Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Tilføjelse af Skygger for Dybde og Kontrast | Kernekoncepter og Grundlæggende Styling
Tailwind CSS til Webudvikling

bookTilføjelse af Skygger for Dybde og Kontrast

Tailwind CSS tilbyder en række værktøjer til at tilføje skygger til elementer.

Box Shadows

Brug præfikset shadow- efterfulgt af størrelsesværdien for at tilføje box shadows.

index.html

index.html

copy

Tekstskygger

Tailwind CSS inkluderer ikke text-shadow-værktøjer som standard. Du kan dog nemt tilføje brugerdefinerede text-shadow-værktøjer i din Tailwind-konfigurationsfil, hvis det er nødvendigt.

Bemærk

Hvis du har brug for at fordybe dig i specifikke Tailwind-skygger, henvises der til dokumentationen: Box Shadow.

Eksempel

Her er et praktisk eksempel på anvendelse af grundlæggende styling (farver, kanter, skygger) ved hjælp af de værktøjer, vi har gennemgået.

index.html

index.html

copy

Forklaring

  1. max-w-sm: Angiver elementets maksimale bredde til lille størrelse (24rem eller 384px);
  2. mx-auto: Centrerer elementet horisontalt ved at anvende auto margener til venstre og højre;
  3. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  4. bg-white: Sætter baggrundsfarven til hvid;
  5. rounded-lg: Anvender store afrundede hjørner på elementet;
  6. shadow-md: Anvender en medium boks-skygge på elementet.
  1. text-2xl: Indstiller skriftstørrelsen til 2xl (1.5rem eller 24px);
  2. font-bold: Anvender fed skriftvægt;
  3. text-gray-900: Indstiller tekstfarven til en meget mørk grå (næsten sort);
  4. mb-2: Tilføjer en bundmargen på 0.5rem (8px);
  5. text-gray-700: Indstiller tekstfarven til en mellemgrå;
  6. mb-4: Tilføjer en bundmargen på 1rem (16px).
  1. border: Tilføjer en kant omkring elementet;
  2. border-blue-500: Indstiller kantfarven til en blå nuance;
  3. rounded-md: Anvender mellemstore afrundede hjørner på elementet;
  4. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  5. bg-blue-50: Indstiller baggrundsfarven til en meget lys blå;
  6. text-blue-700: Indstiller tekstfarven til en mørk blå.
  1. mt-4: Tilføjer en topmargen på 1rem (16px);
  2. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  3. bg-green-100: Indstiller baggrundsfarven til en meget lys grøn;
  4. border: Tilføjer en kant omkring elementet;
  5. border-green-500: Indstiller kantfarven til en grøn nuance;
  6. rounded: Anvender små afrundede hjørner på elementet;
  7. shadow-sm: Anvender en lille skygge på elementet;
  8. text-green-700: Indstiller tekstfarven til en mørk grøn.
question mark

Hvilken klasse bruges til at tilføje en medium skygge til et element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 5

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookTilføjelse af Skygger for Dybde og Kontrast

Stryg for at vise menuen

Tailwind CSS tilbyder en række værktøjer til at tilføje skygger til elementer.

Box Shadows

Brug præfikset shadow- efterfulgt af størrelsesværdien for at tilføje box shadows.

index.html

index.html

copy

Tekstskygger

Tailwind CSS inkluderer ikke text-shadow-værktøjer som standard. Du kan dog nemt tilføje brugerdefinerede text-shadow-værktøjer i din Tailwind-konfigurationsfil, hvis det er nødvendigt.

Bemærk

Hvis du har brug for at fordybe dig i specifikke Tailwind-skygger, henvises der til dokumentationen: Box Shadow.

Eksempel

Her er et praktisk eksempel på anvendelse af grundlæggende styling (farver, kanter, skygger) ved hjælp af de værktøjer, vi har gennemgået.

index.html

index.html

copy

Forklaring

  1. max-w-sm: Angiver elementets maksimale bredde til lille størrelse (24rem eller 384px);
  2. mx-auto: Centrerer elementet horisontalt ved at anvende auto margener til venstre og højre;
  3. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  4. bg-white: Sætter baggrundsfarven til hvid;
  5. rounded-lg: Anvender store afrundede hjørner på elementet;
  6. shadow-md: Anvender en medium boks-skygge på elementet.
  1. text-2xl: Indstiller skriftstørrelsen til 2xl (1.5rem eller 24px);
  2. font-bold: Anvender fed skriftvægt;
  3. text-gray-900: Indstiller tekstfarven til en meget mørk grå (næsten sort);
  4. mb-2: Tilføjer en bundmargen på 0.5rem (8px);
  5. text-gray-700: Indstiller tekstfarven til en mellemgrå;
  6. mb-4: Tilføjer en bundmargen på 1rem (16px).
  1. border: Tilføjer en kant omkring elementet;
  2. border-blue-500: Indstiller kantfarven til en blå nuance;
  3. rounded-md: Anvender mellemstore afrundede hjørner på elementet;
  4. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  5. bg-blue-50: Indstiller baggrundsfarven til en meget lys blå;
  6. text-blue-700: Indstiller tekstfarven til en mørk blå.
  1. mt-4: Tilføjer en topmargen på 1rem (16px);
  2. p-4: Tilføjer polstring på 1rem (16px) på alle sider;
  3. bg-green-100: Indstiller baggrundsfarven til en meget lys grøn;
  4. border: Tilføjer en kant omkring elementet;
  5. border-green-500: Indstiller kantfarven til en grøn nuance;
  6. rounded: Anvender små afrundede hjørner på elementet;
  7. shadow-sm: Anvender en lille skygge på elementet;
  8. text-green-700: Indstiller tekstfarven til en mørk grøn.
question mark

Hvilken klasse bruges til at tilføje en medium skygge til et element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 5
some-alt