CSS  »  Articoli  »  Effetti con CSS 

In questo articolo realizzeremo un modulo, detto anche widget, che consente all'utente di visualizzare diversi tipi di contenuti (form, testo, immagini) in uno stesso spazio e che usa una navigazione tra questi contenuti mediante tab. Ecco subito l'esempio in azione.

Il widget utilizza una base HTML semantica, una parte CSS per la presentazione e per l'impostazione della grafica tramite sprites, una parte di interattività ottenuta con l'ausilio di jQuery UI.

Grafica

Progettiamo per prima cosa la grafica del modulo tenendo bene in considerazione il codice HTML/CSS che andremo a scrivere. In questo articolo prenderemo in esame una base già realizzata:

Figura 1 - Il widget da realizzare

La prima fase del lavoro consiste nel ritagliare le aree di interesse, importare le immagini nel template HTML e ricomporre infine la struttura.

Ecco le aree ti ritaglio che utilizzeremo per il nostro codice HTML:

Figura 2 - Aree di ritaglio

Concentriamo la nostra attenzione sulle tab aggiugendo un maggior livello d'interazione per l'utente realizzando i tre stati principali:

• default: la tab non selezionata;
• hover: l'aspetto della tab al passaggio del mouse;
• active: l'aspetto della tab al click.

Figura 3 - Icone

Un'altra immagine è quella che raccoglie le icone delle tab. Analizziamo il motivo della scelta di preparare due immagini: una con le icone e una di sfondo per le tab:

1. la tab si adatta alla lunghezza del testo, attraverso la proprietà background-repeat;
2. avremo bisogno di un'immagine di background che si ripete lungo tutto la tab e di un'immagine fissa che è l'icona.

Attraverso la tecnica degli sprites CSS utilizziamo un unico file immagine per le icone, assegnando a ogni stato la porzione d'immagine corrispondente.

Nel paragrafo successivo vedremo l'HTML e il CSS necessari per riprodurre questi effetti d'interazione.

Altri articoli

Altre guide

Altre newsletter