Andrea Baccolini, web designer, siti internet

Traduzione dell’articolo “How to Make Div Element 100% Height of Browser Window Using CSS Only” del blog “Stanislav Kostadinov.“

 
In questo post troverete il modo per far si che un elemento HTML riempia l’altezza di qualsiasi schermata con i CSS.

Ci sono molti modi per rendere l’altezza dei vostri elementi HTML alti esattamente come l’altezza della schermata del browser , indipendentemente dalla risoluzione dello schermo , il browser , dispositivo , ecc
Molte di queste opzioni utilizzano JavaScript per scoprire l’altezza della finestra .
Ma c’è un modo per farlo solo con il CSS puro .

Continua a leggere »

Traduzione dell’articolo “* { Box-sizing: Border-box } FTW” del blog “Paul Irish I make the www fun.“

 
Uno dei miei casi preferiti, almeno su layout con i CSS, è il rapporto tra larghezza e padding.
Ti sei occupato di definire le larghezze da abbinare alla tua griglia o proporzioni generali di colonna, poi si inizia ad aggiungere testo, che richiede la definizione di padding per quei box. E’ ecco, ora stai sottraendo pixel dalla vostra larghezza originale in modo che la larghezza non si espanda.

Continua a leggere »

(continua dall’articolo precedente TECNICHE PER UNA TIPOGRAFIA RESPONSIVE 1° parte)

RENDERE IL CORPO DEL TESTO RESPONSIVE

Quando si tratta di fare il corpo del testo reattivo, ci sono alcune note importanti da tenere a mente.
Non solo si deve ridimensionare il testo per adattarlo al suo contenitore, pur mantenendo un’ottima leggibilità e la lunghezza delle linee ragionevoli, ma è necessario ricordarsi di conservare ritmo verticale e interlinea (spazio tra linee) flessibili, assicurarsi che il testo scali bene su schermi ad alta risoluzione, che può essere facilmente modificata dall’utente.

Continua a leggere »

Traduzione dell’articolo “TECHNIQUES FOR RESPONSIVE TYPOGRAPHY” del blog “CODROPS“

 
Uno degli aspetti più importanti del responsive web design è la tipografia reattiva.
Quando si tratta di tipo reattivo sul web, non c’è solo il ridimensionamento del contenitore del testo ma anche quello del testo al suo interno.
Dalla scelta di un tipo di font e colore, altezze di linea per raggiungere le dimensioni leggibili dei caratteri e lunghezze di linea su diverse dimensioni dello schermo, ci sono diversi modi per il raggiungimento di un testo fluido e veramente reattivo sul web.

Continua a leggere »