Menu responsive CSS3 con effetto Transform Scale

Il tutorial che oggi voglio condividere riguarda la realizzazione di un menu responsive con effetto Transition Scale, realizzato interamente con i CSS3 e senza alcun richiamo a files javascript. Potrebbe essere considerato "l'opposto" del menu con transizioni e font Awesome ma sostanzialmente sono due cose differenti.

Add a comment Leggi tutto...

Realizzare un menu responsive con effetto Flip e proprietà transform con CSS3, HTML5 e Font Awesome

L'articolo proposto oggi potrebbe essere una naturale "conseguenza" di quello scritto qualche giorno fa, avente come oggetto le trasformazioni CSS3, con l'ausilio di HTML5 e Font Awesome.

L'effetto "Flip", come si evince dal titolo, altro non è che la rotazione, su un asse, di un elemento. In questo caso, ogni singola voce di menu sarà contraddistinta, nella parte anteriore, da un'icona tra quelle messe a disposizione da Font Awesome e nella parte posteriore dal testo esplicativo per la stessa icona.

Vediamo come procedere.

Add a comment Leggi tutto...

Applicare effetti di sfumatura ed opacità sulle immagini con i CSS3

Spesso l'attenzione di un visitatore, che naviga un sito web, è attirata dalle immagini. Se sono di grande impatto ed esplicative, si tralascia anche la lettura del testo per ammirare la fotografia. Se a questi elementi grafici aggiungiamo anche qualche effetto di sfumatura ed opacità, il gioco è fatto.

Add a comment Leggi tutto...

CSS3 Shapes: realizzare figure geometriche solo con i CSS3

Grazie al modulo dei CSS3 Shapes, è possibile includere nei progetti web molte tra le più comuni forme geometriche che potrebbero rendere più ricche e simpatiche le nostre pagine. Con il solo ausilio dei CSS, possiamo ottenerne diverse, dalle più semplici alle più complesse.

Add a comment Leggi tutto...

Tabella con scroll orizzontale - responsive - formattata con i CSS

Se per esigenze, al momento non note, dovessimo implementare, in una pagina web, una tabella contenente molte celle, potremmo incorrere nello spiacevole risultato che la visualizzazione potrebbe non essere quella che ci aspetteremmo. I testi andrebbero a capo, facendo aumentare l'altezza delle celle. La soluzione potrebbe essere quella di di applicare la barra di scroll, facendola apparire orizzontalmente.

Add a comment Leggi tutto...