Responsive Menu Transitions con CSS3 e font Awesome icons fonts

L'articolo odierno prevede la realizzazione di un menu responsive, adattabile ad ogni dimensione di media, con l'ausilio dei CSS3 ed icone. Tali icone altro non sono che "fonts" reperibili dalla libreria "Font Awesome". La particolarità del menu in oggetto è quella di far apparire, sullo stato :hover, la descrizione per ogni singola voce.

Add a comment Leggi tutto...

Tipografia Responsive: adattare testo e font ad ogni dimensione di media

La stragrande maggioranza degli articoli che trattano di Responsive Web Design, sono focalizzati su due aree principali: layout e griglie fluide, immagini e video adattabili al loro contenitore. Un argomento poco trattato è quello della tipografia responsive. Per la maggior parte dei siti, se non tutti, il testo, "i contenuti", sono l'elemento più importante.

Add a comment Leggi tutto...

Caricare immagini di sfondo in base alla dimensione del media in un layout web responsive

Tra i tantissimi siti web responsive in circolazione, si stanno facendo spazio quelli con immagini di sfondo a tutta pagina, oppure inserite in un elemento HTML, solitamente la header. Sicuramente sono di grande impatto. Però, per tornare un attimo alle immagini, si deve tenere conto del loro "peso" e delle "performance" del device. Un compromesso potrebbe essere quello di crearne tante quante sono le dimensioni del tipo di media. Se è ottimale, non saprei ma una soluzione potrebbe essere quella di visualizzare le immagini di background da una determinata dimensione in poi. Ed è quello di cui ci occuperemo nell'articolo in oggetto.

Add a comment Leggi tutto...

Fluid Video: adattare un video alle dimensioni del viewport in un layout responsive

Nella moltitudine di layout e siti web responsive, uno degli elementi che dovrebbe essere in perfetta armonia con i contenuti delle pagine web, è l'elemento video. Purtroppo, molti elementi non si comportano in maniera corretta ed uno di questi è il vecchio e caro tag <iframe>.

Add a comment Leggi tutto...

Responsive flyout menu. Navigazione a più livelli con CSS3 e Mediaqueries

Quale prosecuzione del precedente articolo, nel tutorial odierno verrà affrontato il tema della navigazione a più livelli, altrimenti chiamata "navigazione con sottovoci", in un sito web responsive.

L'ispirazione mi è venuta capitando nel sito Marchetti Design. Ho trovato un articolo che mostra un menu responsive e che fa uso di pochissimo codice Javascript. Ho chiesto all'amministratore di poter partire dal suo script per arrivare al seguente tutorial. Grazie ad Andrea Marchetti.

Add a comment Leggi tutto...

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati