Se correttamente utilizzati, ombre testo aggiungono profondità e stile a progetti Web. È possibile utilizzare codice di Cascading Style Sheets (CSS) per prendere qualsiasi testo in un file HTML e dargli un'ombra. Combinazioni di colore dell'ombra, offset e il raggio della sfocatura creano una vasta gamma di effetti come lettera stampa, testo d'ardore e ombre sottili. La proprietà "text-shadow" funziona in tutti i browser moderni, ad eccezione di Internet Explorer 9.
Istruzioni
1
Aprire il file HTML della pagina Web in cui si desidera creare l'effetto di testo ombreggiato. Individuare il testo che si desidera modificare e trovare il relativo tag di avvolgimento. Ecco un esempio:
< p > qui è parte del testo all'interno di un paragrafo... </p >
2
Aggiungere una classe al tag avvolgendo il vostro testo. Assegnare alla classe un nome ad esempio "ombreggiato" o "dropshadow", così è possibile destinare in CSS. Questo è un paragrafo con un nome di classe:
< classe p = "ombreggiato" > Ecco qualche testo all'interno di un paragrafo... </p >
3
Scorrere fino all'inizio del file HTML e trovare il tag "< style >". Aggiungere i tag se non li trovate, mettendoli tra i tag "< head >":
< style type = "text/css" >
< / stile >
4
Scrivere un selettore CSS per il tag "selezionare" dal suo nome di classe. Per selezionare dal nome classe, digitare un punto seguito dal nome della classe e quindi aggiungere una coppia di parentesi graffe come questo:
.Shadowed {}
5
Impostare la proprietà "text-shadow" per il colore desiderato, offset e raggio di sfocatura. Il codice finito sarà simile a questo:
.Shadowed () {
text-shadow: #000000 2px 2px 5px;
}
Nel codice precedente, "#000000" rappresenta il nero. I prossimi due numeri rappresentano la quantità di offset dalla parte superiore e sinistra. Utilizzare valori negativi per spostare gli offset da destra o inferiore del testo. L'ultimo valore imposta il raggio di sfocatura, che è la quantità di sfocatura.
Consigli & Avvertenze
- Impostare il colore dell'ombreggiatura di un colore corrispondente allo sfondo della pagina Web.
- Utilizzare valori RGBa per i tuoi colori ombra per modificare l'opacità dell'ombra. Un codice di colore RGBa è costituito da valori di rosso, verde, blu e opacità. Il codice di "text-shadow" sarà simile a questo: "text-shadow: rgba(0,0,0,0.5);" Il quarto valore nel set RGBa è la percentuale di opacità.
- Internet Explorer versione 9 non supporta la proprietà "text-shadow". Provare ad aggiungere un polyfill JavaScript al tuo sito Web per renderlo compatibile.
- Quando si modifica il tuo sito Web, eseguire il backup i file HTML e CSS.