Traduzione dell’articolo “How nth-child Works” del blog “CSS TRICKS.“

 
C’è un selettore CSS, ovvero un pseudo-selettore, denominato nth-child. Ecco un esempio di utilizzo:

ul li:nth-child(3n+3) {  
  color: #ccc;
}

Quello che fa il CSS di cui sopra, è selezionare ogni terzo elemento dell’elenco all’interno di liste non ordinate. Cioè, il 3 °, 6 °, 9 °, 12 °, ecc Ma come funziona? E quali altri tipi di cose ci si può fare con nth-child? Diamo uno sguardo.

Continua a leggere »

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 »

Traduzione dell’articolo “Learning To Use The :before And :after Pseudo-Elements In CSS” del blog “Smashingmagazine“

 
Se avete tenuto sotto controllo vari blog di Web design, probabilmente avete notato che gli pseudo-elementi “:before” e “:after” sono stati sempre sempre sotto attenzione nel panorama di sviluppo front-end – e per una buona ragione .
In particolare, gli esperimenti di un blogger – vale a dire, Nicolas Gallagher sviluppatore con sede a Londra – hanno dato agli pseudo-elementi un po’ di risalto in ritardo.

Continua a leggere »