La tipografia è il giocattolo preferito di tutti nel web design. Uno strumento particolarmente divertente che il CSS ti dà per giocare con il tuo tipo è text-shadow, che all'inizio sembra abbastanza semplice, ma può essere usato per creare alcuni effetti notevoli con un po 'di ingegno e creatività.
Oggi ne faremo diversi text-shadow esempi che puoi copiare e incollare per il tuo lavoro.
L'ombra di base
Il text-shadow proprietà è super facile da lavorare e funziona bene a tutti moderno browser senza nemmeno il prefisso del venditore! Tuttavia, l'uso di strumenti come Modernizr ti aiuterà a ottenere effetti CSS3 avanzati anche nei browser più vecchi, se hai bisogno del supporto di fallback.
Sintassi
La sintassi per creare un semplice text-shadow è mostrato sotto. Hai quattro variabili con cui lavorare, le prime due impostano la posizione dell'ombra, la terza imposta la quantità di sfocatura e la quarta il colore dell'ombra.
Mettendo questo in azione, ecco un esempio con un'ombra che è stata spostata verso il basso di due pixel e quattro pixel a destra con una sfocatura di tre pixel e un colore di nero con un'opacità del 30%.
Ecco il risultato di questo codice, una bella ombra semplice che è abbastanza allettante da sola.
Perché rgba?
Come nota rapida, non è necessario utilizzare rgba per il colore dell'ombra, ma è possibile utilizzare qualsiasi metodo di colore CSS. Tuttavia, trovo che rgba sia l'impostazione di colore ideale per un'ombra perché aggiunge un'altra dimensione con cui lavorare. Non solo puoi impostare la posizione, la sfocatura e il colore dell'ombra, puoi anche impostarne l'opacità usando il valore alfa.
Questo è in realtà più semplice rispetto al lavoro con altri metodi di colore, perché in genere potresti dover cercare un accento decente per il colore di sfondo che è forse leggermente più scuro o più chiaro. Con rgba puoi semplicemente usare il nero o il bianco e ridurre l'opacità per fonderlo con lo sfondo.
Stampa tipografica rapida e sporca
La cosa bella di text-shadows è che puoi effettivamente fare molto di più con loro rispetto alla tua ombra media. Ad esempio, ecco un trucco rapido per creare l'illusione del testo inserito.
La prima cosa che vuoi fare è impostare il colore del tuo testo su una tonalità leggermente più scura del tuo colore di sfondo. Successivamente, applica un leggero bianco text-shadow con una opacità ridotta.
Come puoi vedere, ho usato un colore di sfondo di # 222 e poi ho impostato il testo in nero con un'opacità del 60%. Infine, la mia ombra bianca è stata posizionata leggermente in basso a destra con un'opacità del 10%.
Hard Shadow
Ricorda che non devi affatto sfocare la tua ombra. A causa della loro natura retrò, le ombre del testo duro sono in realtà molto? in questo momento sentitevi liberi di sperimentare con loro nei vostri progetti.
Doppia ombra
Il vero divertimento inizia quando ti rendi conto che non sei limitato a una singola ombra. Usando una virgola per separare le dichiarazioni, puoi applicare tutte le ombre che vuoi!
Ecco la struttura di base della sintassi. Nota che c'è una virgola dopo le prime due ombre e un punto e virgola dopo l'ultima ombra.
Mettendo questo in pratica, ecco un esempio con un trattamento di testo che vedrai in tutto il web in questo momento. L'idea è fondamentalmente quella di applicare due ombre, la prima delle quali è dello stesso colore del tuo sfondo.
Il risultato è quasi un giornale vintage.
Giù e Distante
Una volta che si inizia veramente a stratificare le ombre, i risultati diventano rapidamente sempre più impressionanti. È davvero facile iniziare a creare alcuni effetti 3D finti che gli utenti esperti del web design non crederanno sia il testo dal vivo.
Sotto ho usato quattro enormi ombre, tutte rivolte verso il basso con diversi gradi di distanza e sfocatura.
Vicino e pesante
Ecco un altro esempio della stessa idea, questa volta con tre ombre che sono state mantenute molto più vicine alla fonte. L'effetto rende il tuo testo un po 'più pesante.
Un piccolo aiuto
Guardando in giro per quello che hanno fatto gli altri designer ho trovato due tecniche eccellenti che pensavo fossero perfette per questo post. Il primo proviene da Mark Dotto e il secondo da Gordon Hall.
Mark Dotto's Seriously 3D Text
Ecco un esempio che ho sempre considerato davvero impressionante. Viene da MarkDotto.com e utilizza un impressionante dodici ombre separate per ottenere un effetto 3D molto credibile.
True Inset Text di Gordon Hall
Nota nell'esempio sopra ho chiamato la mia tecnica il? Rapido e sporco? effetto tipografico. Questo perché c'è un modo molto più coinvolgente per creare del testo veramente inset che è molto più credibile.
Gordon usa un serio voodoo dei CSS per tirare fuori non solo un'ombra esterna, ma anche una vera ombra interiore. Controlla il suo post sul blog per una spiegazione completa della tecnica.
Altre ombre divertenti
Ora che hai una buona sensazione per la logica che sta dietro al codice, ecco alcuni esempi che ho saggiato con le spiegazioni noiose. Sentiti libero di rubarli e usarli nel tuo lavoro!
raggiante
Supereroe
Fonti di luce multiple
Soft Emboss
Conclusione
Come la maggior parte degli effetti CSS, le ombre di testo sono estremamente semplici da implementare in una forma base, ma possono assumere una varietà di forme diverse se ci si mette davvero del lavoro. Usando le virgole come separatore, puoi sovrapporre le ombre CSS l'una sopra l'altra per aggiungere drammaticamente interesse e realismo all'effetto.