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....
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à...
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,...
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...
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à...
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...
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;
...
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...
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...
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...
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...
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...
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...
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...
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...
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:
...
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...
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...
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:...
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...
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...
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...
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)...
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...
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...
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...
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...
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 179 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":" \u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E \u003Cstyle\u003E .cl-consent-settings { position: fixed; left: 16px; bottom: 28px; z-index: 100; transition: all 0.15s ease-in-out; transform: translateY(0); } .cl-consent-settings--is-hidden { transform: translateY(70px); opacity: 0; } .cl-consent-settings__hint { border-radius: 4px; background: #282A3C; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15); color: #FFFCF2; position: absolute; right: -195px; top: 0; bottom: 0; margin: auto; height: 40px; width: 175px; display: flex; align-items: center; justify-content: center; padding: 4px 12px; font-size: 12px; font-weight: 400; line-height: 16px; cursor: default; user-select: none; transition: transform 0.3s ease, opacity 0.3s ease; transform: translateX(0); opacity: 0; pointer-events: none; z-index: -1; } .cl-consent-settings__hint::after { content: \u0022\u0022; position: absolute; left: -16px; top: 0; bottom: 0; margin: auto; width: 0; height: 0; border: 0 solid transparent; border-top-width: 12px; border-bottom-width: 12px; border-right: 16px solid #282A3C; } .cl-consent-settings__btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background-color: #4B81E8; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 30px 30px; background-repeat: no-repeat; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.35); z-index: 70; position: relative; text-decoration: none; } .cl-consent-settings__btn:hover + .cl-consent-settings__hint { transform: translateX(22px); pointer-events: all; opacity: 1; } .cl-consent-settings__user { width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 1px solid #ffffff; background-color: #00AD98; background-image: url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022); background-position: center center; background-size: 9px 10px; background-repeat: no-repeat; z-index: 75; position: absolute; top: -2px; right: -8px; text-decoration: none; visibility: hidden; } \u003C\/style\u003E \u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022 onclick=\u0022if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert(\u0027This function only for users from European Economic Area (EEA)\u0027)}; return false\u0022\u003E \u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E \u003C\/button\u003E \u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EPrivacy and cookie settings\u003C\/div\u003E \u003C\/div\u003E","pricds":"show_in_the_footer","vcnt":179,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di %sp3_retention% nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura %DURATION%","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}