Con questo articolo mi propongo di introdurvi alle nuove funzionalità della nuova versione del Cascading Style Sheet nella sua terza versione.

Visto la vastità dell’argomento la trattazione sarà suddivisa in più post che verranno pubblicati con cadenza settimanale; in questo primo appuntamento ci occuperemo degli effetti sui testi.

 Molte delle funzionalità che vi presenterò sono ancora in via di sviluppo e quindi sono soggette a modifiche, che secondo me al 90% non avverranno; se dovessero avvenire provvederò prontamente a modificare l’articolo

Non dilunghiamoci in chiacchiere e iniziamo subito perché abbiamo molto di cui parlare.

Text-shadow

Questo effetto che vedete nella foto sottostante si ottiene mediante l’utilizzo di questo codice che può essere assegnato a un qualsiasi elemento di testo

 h1 {
text-shadow: 2px 2px 2px black;
} 

Ad esempio con questo codice qui sopra tutti gli heading 1 della nostra pagina avranno un’ombra simile a questa qui

Ognuno dei 4 valori che dichiariamo ci permette di controllare l’effetto finale:

• Il primo ci permette di muovere orizzontalmente l’ombra;

a un valore positivo corrisponde uno spostamento dell’ombra verso destra, mentre a uno negativo uno spostamento verso sinistra;

• Il secondo ci permette di muoverla verticalmte;

a un valore positivo corrisponde uno spostamento dell’ombra verso il basso, mentre a uno negativo uno spostamento verso l’alto;

• Il terzo ci permette di controllare la sfocatura;

accetta valori da 0 a salire;

• Il quarto di decidere il colore da assegnare all’ombra;

Il tutto è illustrato nella seguente immagine riassuntiva

Text-overflow

Certe volte quando una o più parole contenute all’interno di un div sono eccessivamente lunghe, ci potrebbe capitare che il resto del testo fuoriesca dal div o ne risulti tagliato (a seconda di come impostiamo la proprietà display del div).

In questa occasione ci torna utile il text-overflow che sostanzialmente ci permette di dire che cosa fare nel caso una frase non entri in un div completamente.

Andiamo a vedere un esempio

<div id="testo"> <!-- div contenente del testo a caso-->

Lorem ipsum dolor sit amen blah blah blah

</div>

/* foglio di stile CSS*/

#testo { width:150px; height: 20px; text-overflow: ellipsis; }

Provate e quello che vedrete sarà che il testo in eccesso viene nascosto e, al passaggio del mouse sopra il div, verrà mostrato…

font-face

Quest’ultima funzione di cui parliamo oggi ci permette di applicare font particolari a tutte le scritte della nostra pagina.

Per fare questo basta creare un collegamento nel CSS con il percorso del file del font e definire una nuova font-family; da quel momento potremo utilizzare quella font-family normalmente come se fosse una qualsiasi altra.

Ecco il codice CSS per definire il nostro nuovo font

@font-face {

 font-family: Skimbu; /* definiamo la font-family, possiamo usare il nome che preferiamo */

 src: url('UnFontCasuale.otf'); /* diamo il percorso del font che può essere .ttf o .otf  */

}

Dal punto in cui definiamo questa font-family in poi potremo assegnarla liberamente a ogni testo. Proviamo ad esempio ad assegnarla a tutti i paragrafi della nostra pagina…

La sintassi è questa

 p

{

font-family: Skimbu;

}

Concludiamo qui questo primo “episodio” che spero sia stato di vostro gradimento, aspettatevene degli altri!

Vi lascio con un video nel quale faccio vedere tutte le funzioni mensionate in questo articolo (tranne la text-overflow) con qualche anticipazione su quelle delle puntate successive…

http://www.youtube.com/watch?v=qHq_BmdAdaI