Nwlapcug.com


Come rendere testo sembrare un pugno in CSS

La proprietà "text-shadow" in CSS rende possibile una serie di effetti di testo visivo, quali ombre, testo d'ardore e un pugno nel testo. Conosciuto anche come "lettera premere" testo, l'effetto di un pugno utilizza un'ombreggiatura del testo con un leggero scostamento, sfocatura sottile e colore chiaro. Questo effetto funziona meglio su sfondi più scuri e non funziona affatto su sfondo bianco. I browser più moderni supportano questa "text-shadow," anche se Internet Explorer non lo fa.

Istruzioni

1

Aprire la pagina Web e trovare "< style >" tag tra i tag "< head >" nel codice HTML. Aggiungere questo codice se non è possibile visualizzare il tag "< style >":

< style type = "text/css" >

< / stile >

2

Aggiungere un nome di classe come "perforata" a qualsiasi tag di cui si desidera visualizzare il testo con l'effetto di puched:

< classe p = "perforato" > paragrafo... </p >

< classe p = "rosso perforato" > rosso paragrafo... </p >

Si noti come il secondo comma nell'esempio utilizza due nomi di classe. Se è possibile trovare che il tag già utilizza un nome di classe, assegnare una seconda e separare con uno spazio tra ciascun nome.

3

Creare una regola di stile per la nuova classe tra i tag di "stile < >":

.Punched () {

}

Prefisso, il nome della classe nel CSS usando un punto, come mostrato in questo esempio.

4

Aggiungere la proprietà "text-shadow" alla nuova regola di stile. Dare all'ombra di un offset di un pixel dalla parte superiore e la sinistra, un un pixel mosso e una luce di colore:

.Punched () {

ombreggiatura del testo: 1px 1px 1px #ffffff;

}

Consigli & Avvertenze

  • Poiché Internet Explorer non supporta le ombre del testo, ha scelto colori che mantenere il testo leggibile anche senza ombre.