Ombre del testo

7.1 Proprietà text-shadow

La proprietà text-shadow in CSS permette di aggiungere ombre al testo, creando un effetto di profondità e migliorando la percezione visiva. Questa proprietà offre flessibilità nella configurazione delle ombre, includendo il controllo dello spostamento, della sfocatura e del colore dell'ombra.

La proprietà text-shadow imposta un'ombra per il testo all'interno di un elemento. Consente di controllare la posizione, la sfocatura e il colore dell'ombra, aggiungendo un accento visivo agli elementi di testo.

Sintassi:

    
      element {
        text-shadow: offset-x offset-y blur-radius spread-radius color;
      }
    
  

Parametri:

• offset-x: spostamento dell'ombra in orizzontale
• offset-y: spostamento dell'ombra in verticale
• blur-radius: raggio di sfocatura dell'ombra (opzionale)
• color: colore dell'ombra (opzionale)

Valori:

• offset-x e offset-y: impostano lo spostamento dell'ombra rispetto al testo. Possono essere valori positivi o negativi
• blur-radius: definisce il grado di sfocatura dell'ombra. Più grande è il valore, più sfocata sarà l'ombra. Il valore predefinito è 0 (senza sfocatura)
• color: imposta il colore dell'ombra. Se il colore non è specificato, viene utilizzato il colore del testo

Esempio di utilizzo:

    
      .shadow-basic {
        font-size: 24px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
      }

      .shadow-blur {
        font-size: 24px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }

      .shadow-color {
        font-size: 24px;
        text-shadow: 2px 2px 2px red;
      }

      .shadow-multiple {
        font-size: 24px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
      }
    
  

    
      <body>
      <p class="shadow-basic">Ombra di base</p>
      <p class="shadow-blur">Ombra con sfocatura</p>
      <p class="shadow-color">Ombra con colore</p>
      <p class="shadow-multiple">Ombre multiple</p>
      </body>
    
  

Spiegazione del codice:

• .shadow-basic: applica un'ombra semplice con uno spostamento di 2px in orizzontale e verticale, un raggio di sfocatura di 2px e un colore nero semi-trasparente
• .shadow-blur: aggiunge un maggiore grado di sfocatura (5px), creando un'ombra più sfocata
• .shadow-color: applica un'ombra con colore (rosso)
• .shadow-multiple: applica due ombre con diversi spostamenti e sfocature, creando un effetto complesso e stratificato

7.2 Esempi

1. Ombra morbida

Ombra morbida con grande raggio di sfocatura:

    
      .soft-shadow {
        font-size: 24px;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
    
  

    
    <body>
      <p class="soft-shadow">Ombra morbida del testo</p>
    </body>
    
  

Spiegazione del codice:

• .soft-shadow: applica un'ombra morbida senza spostamento e con un grande raggio di sfocatura (10px), creando un leggero effetto luminoso intorno al testo

2. Ombra colorata

Ombra con colore acceso e poca sfocatura:

    
      .colorful-shadow {
        font-size: 24px;
        text-shadow: 3px 3px 5px blue;
      }
    
  

    
      <body>
        <p class="colorful-shadow">Ombra con colore acceso</p>
      </body>
    
  

Spiegazione del codice:

• .colorful-shadow: applica un'ombra con colore vivido (blu), spostamento di 3px e raggio di sfocatura di 5px

3. Ombre multiple

Diverse ombre con parametri differenti:

    
      .multi-shadow {
        font-size: 24px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
      }
    
  

    
      <body>
        <p class="multi-shadow">Diverse ombre del testo</p>
      </body>
    
  

Spiegazione del codice:

• .multi-shadow: applica due ombre con parametri differenti: una con piccolo spostamento e sfocatura, e un'altra con grande spostamento e sfocatura di colore rosso

7.3 Punti importanti

Punti importanti nell'utilizzo di text-shadow

Compatibilità dei browser

La proprietà text-shadow è supportata da tutti i browser moderni, inclusi Google Chrome, Firefox, Safari, Edge e Opera. Tuttavia, è importante verificare la visualizzazione delle ombre nelle vecchie versioni dei browser per garantire la compatibilità cross-browser.

Prestazioni

L'uso di ombre complesse con molti spostamenti e sfocatura può influenzare le prestazioni, specialmente sui dispositivi mobili. Ottimizza le ombre per una migliore performance e testale su diversi dispositivi.

Accessibilità

Assicurati che le ombre non peggiorino la leggibilità del testo. Il contrasto tra testo e sfondo deve rimanere sufficiente per tutti gli utenti, inclusi quelli con disabilità visive.

La proprietà text-shadow fornisce solidi strumenti per creare ombre di testo in CSS. Permette di aggiungere vari effetti, dalle semplici ombre alle ombre multilivello complesse con vari colori e sfocature.

L'utilizzo di text-shadow aiuta a migliorare la percezione visiva del testo, aggiungendo profondità e volume al design delle pagine web. È importante tenere a mente la compatibilità dei browser e le prestazioni quando si applicano ombre complesse, e anche l'accessibilità per tutti gli utenti.

1

Compito

Frontend SELF IT, livello 19, lezione 1

Bloccato

Ombra del testo

Ombra del testo

Apri

1

Compito

Frontend SELF IT, livello 19, lezione 1

Bloccato

Diverse ombre

Diverse ombre

Apri