Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Aggiunta di Ombre per Profondità e Contrasto | Concetti Fondamentali e Stile di Base
Tailwind CSS per lo Sviluppo Web

bookAggiunta di Ombre per Profondità e Contrasto

Tailwind CSS offre una gamma di utility per aggiungere ombre agli elementi.

Ombre delle Box

Utilizzare il prefisso shadow- seguito dal valore della dimensione per aggiungere ombre alle box.

index.html

index.html

copy

Ombre del testo

Tailwind CSS non include le utility text-shadow di default. Tuttavia, è possibile aggiungere facilmente utility personalizzate text-shadow nel file di configurazione di Tailwind se necessario.

Nota

Per approfondire le ombre specifiche di Tailwind, consultare la documentazione: Box Shadow.

Esempio

Segue un esempio pratico di applicazione di stile di base (colori, bordi, ombre) utilizzando le utility apprese.

index.html

index.html

copy

Spiegazione

  1. max-w-sm: Imposta la larghezza massima dell'elemento su una dimensione piccola (24rem o 384px);
  2. mx-auto: Centra l'elemento orizzontalmente applicando margini auto a sinistra e a destra;
  3. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  4. bg-white: Imposta il colore di sfondo su bianco;
  5. rounded-lg: Applica angoli arrotondati di grandi dimensioni all'elemento;
  6. shadow-md: Applica un'ombra di media intensità all'elemento.
  1. text-2xl: Imposta la dimensione del carattere su 2xl (1.5rem o 24px);
  2. font-bold: Applica uno stile di carattere grassetto;
  3. text-gray-900: Imposta il colore del testo su un grigio molto scuro (quasi nero);
  4. mb-2: Aggiunge un margine inferiore di 0.5rem (8px);
  5. text-gray-700: Imposta il colore del testo su un grigio medio;
  6. mb-4: Aggiunge un margine inferiore di 1rem (16px).
  1. border: Aggiunge un bordo attorno all'elemento;
  2. border-blue-500: Imposta il colore del bordo su una tonalità di blu;
  3. rounded-md: Applica angoli mediamente arrotondati all'elemento;
  4. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  5. bg-blue-50: Imposta il colore di sfondo su un blu molto chiaro;
  6. text-blue-700: Imposta il colore del testo su un blu scuro.
  1. mt-4: Aggiunge un margine superiore di 1rem (16px);
  2. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  3. bg-green-100: Imposta il colore di sfondo su un verde molto chiaro;
  4. border: Aggiunge un bordo attorno all'elemento;
  5. border-green-500: Imposta il colore del bordo su una tonalità di verde;
  6. rounded: Applica angoli leggermente arrotondati all'elemento;
  7. shadow-sm: Applica una piccola ombra all'elemento;
  8. text-green-700: Imposta il colore del testo su un verde scuro.
question mark

Quale classe useresti per aggiungere un'ombra media a un elemento?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

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

bookAggiunta di Ombre per Profondità e Contrasto

Scorri per mostrare il menu

Tailwind CSS offre una gamma di utility per aggiungere ombre agli elementi.

Ombre delle Box

Utilizzare il prefisso shadow- seguito dal valore della dimensione per aggiungere ombre alle box.

index.html

index.html

copy

Ombre del testo

Tailwind CSS non include le utility text-shadow di default. Tuttavia, è possibile aggiungere facilmente utility personalizzate text-shadow nel file di configurazione di Tailwind se necessario.

Nota

Per approfondire le ombre specifiche di Tailwind, consultare la documentazione: Box Shadow.

Esempio

Segue un esempio pratico di applicazione di stile di base (colori, bordi, ombre) utilizzando le utility apprese.

index.html

index.html

copy

Spiegazione

  1. max-w-sm: Imposta la larghezza massima dell'elemento su una dimensione piccola (24rem o 384px);
  2. mx-auto: Centra l'elemento orizzontalmente applicando margini auto a sinistra e a destra;
  3. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  4. bg-white: Imposta il colore di sfondo su bianco;
  5. rounded-lg: Applica angoli arrotondati di grandi dimensioni all'elemento;
  6. shadow-md: Applica un'ombra di media intensità all'elemento.
  1. text-2xl: Imposta la dimensione del carattere su 2xl (1.5rem o 24px);
  2. font-bold: Applica uno stile di carattere grassetto;
  3. text-gray-900: Imposta il colore del testo su un grigio molto scuro (quasi nero);
  4. mb-2: Aggiunge un margine inferiore di 0.5rem (8px);
  5. text-gray-700: Imposta il colore del testo su un grigio medio;
  6. mb-4: Aggiunge un margine inferiore di 1rem (16px).
  1. border: Aggiunge un bordo attorno all'elemento;
  2. border-blue-500: Imposta il colore del bordo su una tonalità di blu;
  3. rounded-md: Applica angoli mediamente arrotondati all'elemento;
  4. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  5. bg-blue-50: Imposta il colore di sfondo su un blu molto chiaro;
  6. text-blue-700: Imposta il colore del testo su un blu scuro.
  1. mt-4: Aggiunge un margine superiore di 1rem (16px);
  2. p-4: Aggiunge un padding di 1rem (16px) su tutti i lati;
  3. bg-green-100: Imposta il colore di sfondo su un verde molto chiaro;
  4. border: Aggiunge un bordo attorno all'elemento;
  5. border-green-500: Imposta il colore del bordo su una tonalità di verde;
  6. rounded: Applica angoli leggermente arrotondati all'elemento;
  7. shadow-sm: Applica una piccola ombra all'elemento;
  8. text-green-700: Imposta il colore del testo su un verde scuro.
question mark

Quale classe useresti per aggiungere un'ombra media a un elemento?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 5
some-alt