Decorazione e trasformazione del testo nei CSS.

Saper decorare e trasformare il testo e una delle capacita molto importanti nel creare design del sito web unico e attraente. Con questi proprietà dei Css posiamo evidenziare qualcosa che riteniamo molto importante in modo che il lettore capirà subito che volevamo far accento proprio su questa parte del articolo o su questa parola. Cosi riusciremo a trasmettere al meglio il principale messaggio del nostro articolo. Tutto questo e tanto altro con semplici proprietà dei css text-transform e text-decoration

1. Trasforma il testo con  text-transform

Con questa proprietà, è possibile convertire il testo in lettere maiuscole e minuscole, o cambiare la prima lettera di ogni parola, che inizialmente era in minuscolo nei capitalizzati in maiuscolo. La proprietà si eredita.

text-transform
Valore :  
none Il valore di default indica nessuna trasformazione. Inoltre annulla la trasformazione di testo di un elemento in un gruppo di elementi.
capitalize Modificare la scrittura della prima lettera di ogni parola nell'elemento, trasformandola in capitalizzata .
uppercase Consente di visualizzare tutte le parole in un elemento con le lettere maiuscole.
lowercase Consente di visualizzare tutte le parole del elemento(per esempio in un paragrafo o articolo, titolo e cosi via.) in minuscolo.
initial Imposta il valore della proprietà al valore di default.
inherit Eredita valore dal elemento genitore.

Sintassi

h2 {text-transform: none;}
h2 {text-transform: capitalize;}
h2 {text-transform: uppercase;}
h2 {text-transform: lowercase;}

Questa frase ho trasformato per mezzo di proprietà text-transform: capitalize;

In questa frase la prima lettera è in minuscolo perché ho atribuito al tag p classe text-trasform:lowercase, invece le lettere di questa parola sono evidenziate in maiuscolo perché ho usato text-transform: uppercase;

 

2. Decorazione del testo  text-decoration

 

Proprietà decora il testo. Rimuove anche la sottolineatura dei collegamenti. Non si eredita. Sintassi

a {text-decoration: none;}
span {text-decoration: underline;}
span {text-decoration: overline;}
span {text-decoration: line-through;}

text-decoration
Valore:  
none Visualizza il testo senza nesun decorazione, rimuove sottolineatura ai link.
underline Sottolinea il testo.
overline Aggiunge una riga sopra al testo.
line-through Cancella il testo
initial Imposta il valore della proprietà al valore di default.
inherit Eredita valore dal elemento genitore.

Testo di questo paragrafo è stato decorato con text-decoration: underline

Testo di questo paragrafo è stato decorato con text-decoration: overline

Testo di questo paragrafo è stato decorato con text-decoration: line-through

 

3. Formattazione di prima lettera e di prima riga di un paragrafo.

CSS permette di formattare paragrafo usando pseudo classi :first-letter e :first-line. Ad esempio, è possibile evidenziare la prima lettera di ogni paragrafo, simulando un capolettera o per dare un aspetto diverso dal resto alla  prima frase del paragrafo. Come lo  sfondo per :first-letter è possibile impostare un gradiente .
Vediamo esempio e puoi il codice

Testo casuale: La sua funzione di testo riempitivo o di strumento per confrontare l’effetto visivo dei caratteri tipografici


Si definiscono casuali quei testi utilizzati, nella fase di produzione di siti web e pubblicazioni, come riempitivi degli spazi destinati ai contenuti futuri, quando i testi definitivi non sono ancora stati creati.

Sono definiti anche dummy text, testi manichino, testi segnaposto.

Talvolta ne fanno uso anche gli autori di canzoni nella fase di composizione delle loro melodie,

Utilizzandoli per cantare la melodia prima di avere a disposizione il testo finale della canzone.


L’uso di testi casuali sarebbe stata una pratica comune tra i compositori già nel XVI secolo.


Ed ecco il codice dei nostri stili CSS.

/*Primo paragrafo*/
.primoparagrafo:first-letter {
  font-size: 2em;
  margin-right: 2px; 
  color: #EE9966;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
.primoparagrafo :first-line {
  color: #EE9966;
}
/*Secondo paragrafo*/
.secondoparagrafo:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
/*terzo paragrafo*/
.terzoparagrafo:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  margin-bottom: 2px;
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
}
/*Quarto paragrafo*/
.quartoparagrafo:first-letter {
  font-size: 1.2em;
  padding: 3px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
  border-radius: 50%;
}
/*Quinto paragrafo*/
.quintoparagrafo:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #EE9966;
  float: left;
  font-weight: bold;
}
/*Sesto paragrafo*/
.sestoparagrafo:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(http://ioeweb.it/images/css/border-orange.png);
  border: 2px solid #EE9966;
  color: #544E3E;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}

Letto 607 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