Guida CSS3

CSS 3: cos’è e cosa cambia rispetto a CSS 2.1

Massimiliano Bossi - 1 Giugno 2018

In questa guida illustreremo il funzionamento di CSS3, l'ultima versione, o livello secondo la terminologia W3C, dei fogli di stile con i quali si dovrebbe descrivere la formattazione delle pagine HTML. Questa guida deve essere intesa come un completamento della nostra guida base ai CSS che altro non è che una guida, molto dettagliata, alla versione 2.1 del linguaggio....

Selettori, pseudo-classi e pseudo-elementi in CSS3

Massimiliano Bossi - 1 Giugno 2018

I selettori sono schemi (pattern) utilizzati nei fogli di stile per selezionare gli elementi a cui si vuole applicare uno stile. Nella guida CSS di base abbiamo già affrontato l'argomento spiegando dettagliatamente cos'è un selettore e quali sono i principali tipi di selettori supportati da CSS. Come abbiamo detto nella lezione introduttiva di questa guida, CSS3 ha apportato delle novità...

CSS media query

Massimiliano Bossi - 1 Giugno 2018

Da sempre CSS integra un meccanismo per servire fogli di stili differenti a seconda del dispositivo utilizzato dal visitatore (nella nostra guida base ai CSS abbiamo affrontato l'argomento nella lezione dedicata all'attributo media). Con CSS3 questo meccanismo è stato evoluto ed ampliato notevolmente mediante l'introduzione di un nuovo sistema che prende il nome di media query o media queries,...

@font-face: utilizzare font personalizzati con CSS3

Massimiliano Bossi - 1 Giugno 2018

Uno degli aspetti di CSS3 che più è piaciuto ai creatori di siti internet è sicuramente la possibilità di "incorporare" un font personalizzato nella pagina ed utilizzarlo per stilizzare il testo. Questo ha dato molta libertà agli sviluppatori che non si sono più trovati limitati ai caratteri installati sui computer degli utenti finali (arial, verdana, tahoma, ecc.) ma hanno...

Text-overflow: gestire l’overflow dei contenuti con CSS3

Massimiliano Bossi - 1 Giugno 2018

CSS3 permette di definire come si deve comportare un testo quando non ha abbastanza spazio nel box che lo contiene. Ciò è possibile grazie alla proprietà text-overflow. Questa proprietà può assumere tre valori: clip: il testo viene tagliato; ellipsis: vengono mostrati i puntini di sospensione dove avviene il taglio del testo; string: viene mostrato un testo specifico per indicare il taglio. Naturalmente, questa proprietà...

Andare a capo con CSS: la proprietà word-wrap

Massimiliano Bossi - 1 Giugno 2018

Grazie a CSS3 è possibile forzare il ritorno a capo di una stringa anche in assenza di spaziature tra i caratteri. In altre parole, la nuova versione del linguaggio CSS consente di andare a capo anche quando ci sono parole (o, meglio dire, stringhe) troppo lunghe che, normalmente, causerebbero un'impossibilità per il testo di rispettare la dimensione del proprio...

CSS text-shadow: applicare un’ombra al testo

Massimiliano Bossi - 1 Giugno 2018

Con CSS3 è stata introdotta la proprietà text-shadow grazie alla quale è possibile aggiungere un'ombra alle parole di un testo. Si tratta di un'innovazione rilevante in quanto, prima di CSS3, era necessario utilizzare delle immagini per realizzare questo effetto all'interno di una pagina web. Vediamo un esempio di utilizzo della proprietà text-shadow: h2 { font-size: 50px; color: #000; ...

CSS3: contare gli elementi con counter-reset e counter-increment

Massimiliano Bossi - 1 Giugno 2018

Le proprietà di CSS3 che vi propongo in questa lezione permettono di numerare automaticamente gli elementi di un documento HTML. La numerazione è resa possibile grazie a due proprietà: counter-reset e counter-increment. La prima proprietà è utilizzata per creare una variabile da usare come contatore. La proprietà in questione viene normalmente assegnata all'elemento genitore (che contiene gli elementi che si...

CSS3: definire i colori con RGB e RGBa

Massimiliano Bossi - 1 Giugno 2018

CSS prevede la possibilità di specificare un colore in diversi modi. Il modo più utilizzato è sicuramente quello di specificarne il codice esadecimale, tuttavia è anche possibile definire un colore con la notazione RGB (Red - Green - Blue). Ad esempio: body { background-color: rgb(255,255,255); } /* oppure */ body { background-color: rgb(100%,100%,100%); } Nell'esempio abbiamo visto che rgb() accetta tre valori in...

CSS: definire i colori in HSL

Massimiliano Bossi - 1 Giugno 2018

Oltre alla notazione RGBa, CSS3 ha introdotto un nuovo modo per definire i colori attraverso la notazione HSL (Hue, Saturation, Lightness). Vediamo nel dettaglio cosa sono e come si esprimono questi valori. Hue (Tonalità) Questo valore definisce la tonalità del colore. Prevede un valore numerico (senza alcuna unità di misura) rappresentato dall'angolo di un cerchio di colori, dove lo zero corrisponde...

CSS opacity: gestire la trasparenza degli elementi

Massimiliano Bossi - 1 Giugno 2018

Una delle novità più interessanti di CSS3 è la possibilità di gestire la trasparenza degli elementi attraverso la proprietà opacity. In modo non dissimile da quanto già visto nelle lezioni dedicate alla notazione RGBa e HSLa, la proprietà opacity accetta valori compresi nell'intervallo tra 0.0 (totale trasparenza) e 1.0 (nessuna trasparenza). Il valore di default, ovviamente, è 1. Facciamo un esempio: div.a...

CSS3 background multipli: usare più di un’immagine di sfondo

Massimiliano Bossi - 1 Giugno 2018

Un altra novità interessante di CSS3 consiste nella possibilità di utilizzare multiple immagini di sfondo. In pratica, CSS3 offre ai designer di pagine web la possibilità di combinare diverse immagini di sfondo per un medesimo box. Per faro si utilizzano la consuete proprietà di gestione dei background alle quale si passeranno più valori separati da una virgola. Vediamo un...

CSS background-size: definire le dimensioni dell’immagine di sfondo

Massimiliano Bossi - 1 Giugno 2018

CSS3 ha introdotto diverse proprietà per la gestione dello sfondo. Tra le più interessanti, sicuramente, c'è background-size, grazie alla quale lo sviluppatore può impostare, in modo arbitrario, la dimensione dell'immagine di sfondo (il valore di default di questa proprietà è "auto"). Per meglio comprendere il funzionamento di questa proprietà vediamo subito un esempio. Supponiamo di voler utilizzare, come immagine di...

CSS background-clip: specificare l’area di estensione dello sfondo

Massimiliano Bossi - 1 Giugno 2018

Un'altra novità introdotta da CSS3 per la gestione dello sfondo consiste nella proprietà background-clip. Questa proprietà può essere utilizzata per specificare l'area di estensione dello sfondo rispetto all'elemento cui è applicato. Tale proprietà può riguardare qualsiasi tipo di sfondo, sia le immagini che i colori pieni. Con la proprietà background-clip, in altre parole, è possibile definire se lo sfondo debba...

CSS background-origin: definire l’area dell’elemento dove posizionare lo sfondo

Massimiliano Bossi - 1 Giugno 2018

Sempre relativamente alla gestione del background, CSS3 introduce la nuova proprietà background-origin. Grazie a questa nuova proprietà è possibile definire a quale area di un elemento posizionare l'immagine di sfondo. Questa proprietà è usata in combinazione con le proprietà background-image e background-position. Con la proprietà background-origin, in altre parole, è possibile definire se la posizione dello sfondo debba essere relativa...

CSS3: usare gradienti come immagini di sfondo

Massimiliano Bossi - 1 Giugno 2018

Un'altra interessante novità di CSS3 consiste nella possibilità di specificare un gradiente per la proprietà background-image (prima di questa innovazione, la proprietà in oggetto poteva accettare come valore solo la URL di un file di immagine). In altre parole, è possibile utilizzare come sfondo, di una pagina o di un box, una sfumatura. I gradienti supportati sono di due tipi: ...

Border-radius: angoli arrotondati con CSS3

Massimiliano Bossi - 1 Giugno 2018

Uno degli aspetti più interessanti di CSS3, e sicuramente uno dei primi ad essere implementati dagli sviluppatori, è la possibilità di creare elementi con bordi arrotondati mediante la proprietà border-radius. Prima di CSS3, per creare box con i bordi arrotondati si dovevano utilizzare delle immagini da posizionare ai quattro angoli dell’elemento da riquadrare. Era poi necessario un gioco di...

CSS border-image: creare bordi con le immagini

Massimiliano Bossi - 1 Giugno 2018

Sempre a proposito di bordi, un'altra interessante possibilità offerta da CSS3 consiste nel creare un bordo utilizzando un'immagine attraverso la nuova proprietà border-image. L'implementazione di questa proprietà, tuttavia, non è per niente intuitiva... anzi, richiede un po' ragionamento e di attenzione. Innanzitutto bisogna predisporre l’immagine da usare in modo opportuno. Contrariamente a quanto si potrebbe pensare, l’immagine non viene ripetuta...

Box-shadow: gestire le ombre nei box con CSS3

Massimiliano Bossi - 1 Giugno 2018

Un'altra interessante novità introdotta da CSS3 consiste nella possibilità di applicare un’ombra ad un box mediante la proprietà box-shadow. Firefox, Chrome, Safari e Opera la supportano senza problemi, Internet Explorer solo dalla versione 9 in avanti. Cominciamo con un primo esempio per prendere dimestichezza con la proprietà box-shadow: div { width: 220px; padding: 5px; background: #99CCFF; box-shadow:...

CSS box-sizing

mbossi-admin - 29 Giugno 2018

Un'altra novità importante di CSS3 è data dalla proprietà box-sizing. Grazie a questa proprietà è possibile definire il modo in cui CSS debba calcolare la dimensione di un box (larghezza e altezza) in relazione ad eventuali padding e bordi. Dimensionamento di un box in CSS 2.1 Prima dell'avvento di CSS3, il dimensionamento di un box coi CSS riguardava esclusivamente l'area di...

CSS resize: ridimensionare gli elementi

Massimiliano Bossi - 1 Giugno 2018

CSS3 dispone di una proprietà che permette di effettuare il ridimensionamento, da parte dell'utente, degli elementi dell'interfaccia. La proprietà in questione è resize. Questa proprietà può assumere uno dei seguenti valori: none - non è consentito alcun ridimensionamento; both - il ridimensionamento può avvenire sia in verticale che in orizzontale; horizontal - è ammesso solo il ridimensionamento orizzontale; vertical - è ammesso...

CSS Flexbox: creare layout flessibili con CSS3

Massimiliano Bossi - 1 Giugno 2018

Uno dei moduli più interessanti e innovativi di CSS3 è, sicuramente, quello che introduce i Flexible Box o Flexbox. Si tratta di una novità importante in quanto riguarda la creazione di layout, cioè uno degli ambiti più complessi del lavoro del Web designer. In realtà non sarebbe sbagliato affermare che i Flexbox rappresentano il primo strumento sintattico appositamente pensato...

Layout a colonne con CSS3

Massimiliano Bossi - 1 Giugno 2018

Uno degli aspetti che, da sempre, ha "creato grattacapi" agli sviluppatori di pagine web è la possibilità di impaginare il testo su più colonne. Grazie a CSS3, per fortuna, questa esigenza (apparentemente semplice) sta trovando una risposta concreta. In quella che potremmo ormai considerare la "preistoria" dello sviluppo web si usano le tabelle con i bordi trasparenti, poi (layout tableless)...

CSS transform: trasformazioni bidimensionali con CSS3

Massimiliano Bossi - 1 Giugno 2018

CSS3 permette di trasformare l'aspetto degli elementi HTML. In particolare, se ne possono modificare forma, posizione e dimensione. Il tutto si basa sulla proprietà transform, supportata da quasi tutti i browser, seppur con alcune precisazioni: Internet Explorer dalla versione 10 in avanti (nella versione 9, infatti, è necessario premettere alla proprietà il prefisso -ms-) Chrome e Safari richiedono il prefisso -webkit- La...

Trasformazioni 3D e prospettiva con CSS3

Massimiliano Bossi - 1 Giugno 2018

Oltre alle trasformazioni 2D, di cui ci siamo occupati nella lezione precedente, CSS3 permette di gestire spettacolari trasformazioni 3D attraverso proprietà e metodi ad hoc. I metodi per le trasformazioni 3D sono analoghi a quelli che abbiamo visto per le trasformazioni 2D ma, ovviamente, eseguono la trasformazione sulla terza dimensione. Una semplice rotazione tridimensionale con CSS3 Per prima cosa, vorrei proporvi...

CSS transition: gestire le transizioni con CSS3

Massimiliano Bossi - 1 Giugno 2018

Nelle lezioni precedenti abbiamo affrontato il tema delle trasformazioni, ma di queste trasformazioni abbiamo visto solo il risultato finale. In realtà, CSS3 permette di animare le trasformazioni (o altri tipi di cambiamento nel valore delle proprietà) con la tecnica della transizione. Cominciamo con una transizione semplice: disegneremo un div a cui cambieremo colore di sfondo al passaggio del mouse. Scopo...

Animazioni con CSS3

Massimiliano Bossi - 1 Giugno 2018

Oltre che attraverso le transizioni, che abbiamo visto nella precedente lezione, per creare effetti animati, CSS3 dispone anche della proprietà animation. Attraverso questa proprietà è possibile vere e proprie animazioni attraverso cambiamenti graduali nello stile degli elementi. Non ci sono limiti al numero delle proprietà su cui è possibile intervenire ed il numero volte che è possibile farlo. Per poter...