Introduzione a HTML 5: nuove proprietà CSS 3

In questa serie su HTML 5 abbiamo già avuto modo di affrontare i nuovi elementi HTML e i nuovi selettori CSS 3.

Ora vediamo, finalmente, alcune delle più interessanti e comode novità tra le proprietà di CSS 3

Border-radius

Finalmente si possono fare gli angoli arrotondati senza immagini e senza ricorrere a DIV aggiuntive.

Con la proprietà border-radius, e le equivalenti -moz-border-radius e -webkit-border-radius, possiamo definire via CSS un raggio di curvatura per gli angoli.

.rounded {border-radius: 10px}

Firefox e Chrome supportano già da diverse versioni tale proprietà, mentre Internet Explorer 9 è il primo della sua famiglia a supportare gli angoli arrotondati.

Nota: per semplificare l’introduzione di proprietà CSS 3 in Internet Explorer 8 e precedenti, potete usare l’ottimo progetto CSS 3 PIE.

Box-shadow e text-shadow

Con box-shadow possiamo creare una ombreggiatura di sfondo per un elemento blocco.

.shadow{ box-shadow: #cccccc 5px 5px 5px }

Il primo parametro indica il colore dell’ombra, i successivi due indicano la distanza orizzontale e verticale dell’ombra dall’elemento a cui si applica, l’ultimo indica l’area di blur, ovvero di diffusione sfumata dell’ombra.

Con text-shadow i parametri sono gli stessi, ma si applicano al testo contenuto in un elemento.

Font-face

Per molto tempo il problema della scelta dei font per un sito è stato quello di utilizzare una famiglia abbastanza diffusa da garantirci che fosse presente sulla maggior parte, se non tutti, i dispositivi.

Questo ha ridotto la varietà di font utilizzabili.

La direttiva @font-face ci permette di risolvere il problema fornendo direttamente il font insieme al nostro sito web

@font-face {     font-family: "MyNewFont";     src: url("font.ttf");  }

Nell’esempio riportato stiamo definendo un nuovo font chiamato MyNewFont corrispondente al file font.ttf presente nella stessa cartella del file CSS.

Tra l’altro esistono diversi siti online che mettono a disposizione font gratuiti che possono essere:

• scaricati e offerti direttamente dal vostro sito
• inclusi direttamente dal sito che li mette a disposizione (vedi ad esempio Google Web Fonts)

Linear-gradient e radial-gradient

Con questa proprietà possiamo definire un gradiente di colore da utilizzare come background di un elemento.

body{     background: linear-gradient( top, #ffffff, #cc0000)   }

Il primo parametro è la posizione di partenza: top, bottom, left, right oppure una inclinazione in gradi.

Il secondo e il terzo parametro definiscono i colori di partenza e di arrivo, con la possibilità di definire nel dettaglio la “rapidità” di approccio dei due colori.

Con radial-gradiant otteniamo un effetto simile, ma partire da un determinato punto nella pagina e con una espansione circolare o ellittica.

body {    background: radial-gradient( center, circle, #ffffff, #cc0000 )  }

Altre proprietà

L’evoluzione della proprietà rgb è rgba: possiamo definire un colore non solo in termini di red, green e blue, ma indicando un quarto parametro che va da 0 a 1 e ne definisce l’opacità (ovvero l’inverso della trasparenza).

Con outline possiamo definire un bordo aggiuntivo che può essere piazzato a una distanza a piacere dall’elemento a cui si riferisce. La sintassi di outline è simile a quella di border, mentre con outline-offset possiamo definire la distanza di questo bordo aggiuntivo.

Con border-image possiamo indicare una immagine da utilizzare come bordo, anzichè una delle opzioni fisse già presenti nella proprietà border.

Transform e Transition

La proprietà transform ci permette di intervenire sull’aspetto dei blocchi in diversi modi.

Con scale(x,y) possiamo rimpicciolire (per valori da 0 a 1) o ingrandire (per valori maggiori di 1) un blocco. Inoltre, con valori negativi otteniamo un effetto specchio. Se inseriamo un solo valore si applicherà ad entrame le direzioni. Esistono anche le proprietà scaleX e scaleY per applicare l’operazione a una sola direzione.

Con rotate(x) possiamo ruotare il nostro blocco in senso orario (per valori positivi) o in senso opposto (per valori negativi) un blocco. I valori vanno espressi in gradi, ad esempio 20deg

Con skew possiamo inclinare il nostro blocco, sempre in senso orario o antiorario a seconda del valore inserito, e sempre espresso in gradi.

Con translate(x,y) possiamo spostare il nostro blocco. Di fatto otteniamo lo stesso effetto che con CSS 2 si poteva realizzare grazie a position: relative e le proprietà top, bottom, left e right. Esistono anche le proprietà individuali translateX e translateY

Tutte queste trasformazioni si possono applicare anche alle pseudoclassi, ad esempio :hover in modo che si attivino solo al passaggio del mouse.

Infine, con la proprietà transition possiamo intervenire su tutte queste trasformazioni per renderle graduali definendo:

• il tempo di attesa prima che parta la trasformazione
• il tempo che impiega la trasformazione per concludersi
• la modalità di trasformazione (normale, in accelerazione, in rallentamento

E’ facile vedere come una buona parte di effetti che attualmente vengono realizzati in JavaScript potranno essere definiti direttamente tramite regole CSS.

Conclusioni

Con questo articolo si conclude la carrellata su HTML 5 e CSS 3.

Come abbiamo accennato all’inizio, una componente importante della rivoluzione in corso sono anche le nuove tecnologie offerte da JavaScript, ma vale la pena affrontarle in un secondo momento, dopo aver perfezionato le proprie abilità su quanto visto finora.

Prossimamente, su questo blog 🙂