Eleganti contenitori animati per contenuti in evidenza con CSS3

 

In questo tutorial creeremo una serie di contenitori in evidenza, ai quali sarà applicato un piacevole effetto di scorrimento animato al loro passaggio con il mouse. Vi consiglio di scaricare i file di origine e visitare la pagina della demo per vedere l’animazione dal vivo.

Codice HTML

Si definiranno quattro contenitori che utilizzeranno la stessa struttura. Ogni contenitore è costituito da un titolo, un’immagine, ed un testo di descrizione. Tutti i contenitori sono ineriti dentro un contenitore principale. Sintassi di un contenitore scatola è la seguente:

La sintassi per altre tre caselle è la stessa e tutto quello che dovete fare è copiare il codice altre tre volte.

Codice CSS

Innanzitutto definiamo il CSS per l’intero contenitore:

Dopodichè passiamo a progettare con CSS3 i nostri 4 contenitori

Sito Web | Autore   Demo   Download

pixolo ads
Cambia Copertina
2303 | Articolo pubblicato 4 anni fa nella categoria Css - Html.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
0
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×