Come creare ombra lunga per testo. Text-shadow nel merino.

Le ombre lunghe sono un effetto popolare che fa  parte della tendenza del "design piatto", molto spesso utilizzato nel web design, in varie elementi di interfaccia, icone e testo. Ora, per creare diversi effetti di ombra per testo  non è necessario usare Photoshop, ma solo una semplice proprietà text-shadow di CSS.

Per illustrare questo, ho preparato alcuni semplici esempi di utilizzo delle proprietà shadow  per creare un'elegante ombra lunga per il testo. Sperimentando con i valori di questa proprietà, puoi facilmente creare un effetto di ombra tutto tuo.

Durante la lezione useremo proprietà text-shadow e unita di misura vw.

ioeweb.it

In ogni esempio, viene mostrato il risultato, e tutto il codice html / css, spiegazioni speciali, non penso che siano necessari, mi concentrerò solo su alcuni dettagli.

Ad esempio, per una dimensione del font, ad esempio, e stata usata  l'unità di misura relativa come vw con la quale le dimensioni di caratteri vengono calcolati in relazione alla grandezza della  finestra del browser,  il che significa che il carattere verrà sempre visualizzato correttamente quando l'utente ridimensiona la finestra del browser (mobile o desktop).

  Inoltre, per ottenere l'effetto dell'ombra lunga, sono stati utilizzati vari parametri dell'ombra, separati da una virgola. Permettetemi di ricordarvi che, secondo le specifiche CSS3, viene preso in considerazione il seguente ordine: la prima ombra nella lista è posizionata in alto, l'ultima nella lista in basso.

1. Ombra lunga del testo sullo sfondo chiaro

.long-sadow {
    color: #333333;
    line-height: 1.2;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .08), 2px 2px 1px rgba(0, 0, 0, .075), 4px 4px 1px rgba(0, 0, 0, .07), 6px 6px 1px rgba(0, 0, 0, .065), 8px 8px 1px rgba(0, 0, 0, .06), 10px 10px 1px rgba(0, 0, 0, .055), 12px 12px 1px rgba(0, 0, 0, .05), 14px 14px 1px rgba(0, 0, 0, .045), 16px 16px 1px rgba(0, 0, 0, .04), 18px 18px 1px rgba(0, 0, 0, .035), 20px 20px 1px rgba(0, 0, 0, .03), 22px 22px 1px rgba(0, 0, 0, .025), 24px 24px 1px rgba(0, 0, 0, .02), 26px 26px 1px rgba(0, 0, 0, .015), 28px 28px 1px rgba(0, 0, 0, .01), 30px 30px 1px rgba(0, 0, 0, .005), 32px 32px 1px rgba(0, 0, 0, .0025), 34px 34px 1px rgba(0, 0, 0, .002), 36px 36px 1px rgba(0, 0, 0, .0015), 38px 38px 1px rgba(0, 0, 0, .001);
}

Il risultato

ioeweb.it

2. Testo con la ombra lunga sullo sfondo scuro

.long-sadow {
    color: #f4f4f4;
    line-height: 1.2;
    letter-spacing: .1em;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    text-transform: uppercase;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, .08), 2px 2px 1px rgba(0, 0, 0, .075), 4px 4px 1px rgba(0, 0, 0, .07), 6px 6px 1px rgba(0, 0, 0, .065), 8px 8px 1px rgba(0, 0, 0, .06), 10px 10px 1px rgba(0, 0, 0, .055), 12px 12px 1px rgba(0, 0, 0, .05), 14px 14px 1px rgba(0, 0, 0, .045), 16px 16px 1px rgba(0, 0, 0, .04), 18px 18px 1px rgba(0, 0, 0, .035), 20px 20px 1px rgba(0, 0, 0, .03), 22px 22px 1px rgba(0, 0, 0, .025), 24px 24px 1px rgba(0, 0, 0, .02), 26px 26px 1px rgba(0, 0, 0, .015), 28px 28px 1px rgba(0, 0, 0, .01), 30px 30px 1px rgba(0, 0, 0, .005), 32px 32px 1px rgba(0, 0, 0, .0025), 34px 34px 1px rgba(0, 0, 0, .002), 36px 36px 1px rgba(0, 0, 0, .0015), 38px 38px 1px rgba(0, 0, 0, .001);
}<h3>

Risultato

ioeweb.it

 

3. Ombra con inclinazione a sinistra

 

Negli esempi sopra, le opzioni di ombreggiatura, la dimensione del carattere e la saturazione sono le stesse, solo il colore: il colore del testo cambia, a seconda del colore di sfondo del contenitore genitore. Inoltre, è possibile modificare lo scostamento dell'ombra relativo, ad esempio, per far cadere l'ombra a sinistra e verso il basso, basta modificare il primo valore nelle impostazioni dell'ombreggiamento in negativo, quindi impostare lo spostamento dell'ombra a sinistra orizzontalmente rispetto al testo. Alla fine, ottieni qualcosa di simile a questo:

ioeweb.it


.long-sadow3 {
    color: #333333;
    ine-height: 1.2;
    margin: 15px 0;
    font-size: 8vw;
    font-weight: lighter;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: -1px 1px 8px rgba(0, 0, 0, .08), -2px 2px 1px rgba(0, 0, 0, .075), -4px 4px 1px rgba(0, 0, 0, .07), -6px 6px 1px rgba(0, 0, 0, .065), -8px 8px 1px rgba(0, 0, 0, .06), -10px 10px 1px rgba(0, 0, 0, .055), -12px 12px 1px rgba(0, 0, 0, .05), -14px 14px 1px rgba(0, 0, 0, .045), -16px 16px 1px rgba(0, 0, 0, .04), -18px 18px 1px rgba(0, 0, 0, .035), -20px 20px 1px rgba(0, 0, 0, .03), -22px 22px 1px rgba(0, 0, 0, .025), -24px 24px 1px rgba(0, 0, 0, .02), -26px 26px 1px rgba(0, 0, 0, .015), -28px 28px 1px rgba(0, 0, 0, .01), -30px 30px 1px rgba(0, 0, 0, .005), -32px 32px 1px rgba(0, 0, 0, .0025), -34px 34px 1px rgba(0, 0, 0, .002), -36px 36px 1px rgba(0, 0, 0, .0015), -38px 38px 1px rgba(0, 0, 0, .001);
}

Prova anche di ridimensionare la finestra del tuo browser, e vedrai come il testo si adatta facilmente a qualsiasi dimensione e, insieme  con il testo, anche l'ombra cambia il suo aspetto di conseguenza.

Letto 99 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso