CSS: testo preformattato a righe alternate

Short link

I gradienti CSS3 possono essere utilizzati per vari scopi. Un'applicazione interessante è la creazione delle righe di colore alternato sull'elemento pre. Vediamo i dettagli di questa soluzione.

La soluzione prevede l'uso di un gradiente ripetuto:


pre {
  display:block;
  font:normal 12px/22px Monaco, Monospace !important;
  color:#CFDBEC;
  background-color:#2f2f2f;
  background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding:0em 1em;
  white-space: pre-wrap;
  word-wrap: break-word;
}​