Paragrafo standard

Questo è un paragrafo standard con testo in Verdana 12px. Ci servirà da termine di paragone per le nostre trasformazioni. Tutti gli stili dei paragrafi sono stati definiti con delle classi.

Codice:

.p1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}


Font-size-adjust

Il testo di questo paragrafo è in Verdana 12px. Abbiamo applicato la proprietà font-size-adjust.

Codice:

.p2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-size-adjust: 1.5;
}


Font-stretch: ultra-expanded

Il testo di questo paragrafo dovrebbe apparire molto espanso.

Codice:

.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-stretch: ultra-expanded;
}


Font-stretch: ultra-condensed

Il testo di questo paragrafo dovrebbe apparire molto compatto.

Codice:

.p4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-stretch: ultra-condensed;
}


Font-variant

Il testo di questo paragrafo sarà tutto in maiuscoletto.

Codice:

.p5 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-variant: small-caps;
}


Letter-spacing con valore positivo

Lo spazio tra le lettere di questo paragrafo sarà più ampio del normale. Abbiamo applicato la proprietà letter-spacing con valore positivo.

Codice:

.p6 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 5px;
}


Letter-spacing con valore negativo

Lo spazio tra le lettere di questo paragrafo sarà notevolmente contratto. Abbiamo applicato la proprietà letter-spacing con valore negativo: letter-spacing 5px;

Codice:

.p6bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: -5px;
}


Text-indent

Il testo di questo paragrafo e degli altri due è indentato di 20px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Codice:

.p7 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-indent: 20px;
}


Font-shadow

Il testo di questo paragrafo dovrebbe un'ombreggiatura blu.

Codice:

.p8 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-shadow: 5px 5px Blue;
}


Text-transform: uppercase

Il testo di questo paragrafo dovrebbe essere tutto in maiuscolo, ma nel codice è scritto in minuscolo.

Codice:

.p11 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
}


Text-transform: lowercase

IL TESTO DI QUESTO PARAGRAFO DOVREBBE ESSERE TUTTO MINUSCOLO, MA NEL CODICE è SCRITTO TUTTO IN MAIUSCOLO. POTENZA DI TEXT-TRANSFORM.

Codice:

.p11bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: lowercase;
}


Text-transform: capitalize

Notate la prima lettera di ogni parola: maiuscola.

Codice:

.p11 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: capitalize;
}


Whitespace: pre

Il testo di questo paragrafo dovrebbe mantenere gli spazi bianchi presenti nel codice.

Codice:

.p9 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
white-space: pre;
}


Whitespace: nowrap

Il testo di questo paragrafo non mantiene gli spazi bianchi presenti nel codice e dovrebbe apparire tutto su una riga. Per far vedere come funziona abbiamo aggiunto queste parole insignificanti ma utili allo scopo.

Codice:

.p9bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
white-space: nowrap;
}


Word-spacing

Le parole di questo paragrafo dovrebbero essere più spaziate del normale, esattamente di 15px.

Codice:

.p10 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
word-spacing: 15px;
}