CSS | Colorer un fond, une ligne sur deux

Colorer une ligne sur deux c’est beau quand on montre du code à ses lecteurs, mais c’est encore mieux quand on utilise pas de script dauber. Voici donc mon humble exemple avec du CSS.

Pour faire cela, il est nécessaire de maîtriser la hauteur de ligne et le padding (marge intérieur) puisque la manière décrite ci-dessous ne tient pas compte des lignes de textes, c’est une bidouille de background (mais ça fonctionne). En gros une série de deux couleurs avec une hauteur de deux lignes est répétée.

  • background-size : 100% 56px; On va répéter deux couleurs donc il faut multiplier par 2 la hauteur de ligne (line-height).
  • padding : 0px 2px 0px 15px; pas de padding haut et bas, ou il vous faudra le compenser dans repeating-linear-gradient.
  • background: repeating-linear-gradient(to bottom, #e1e1e1 0, #e1e1e1 28px, #f6f6f6 28px, #f6f6f6 56px);
    • to bottom  : la couleur va vers le bas
    • #e1e1e1 0 : la première couleur commence au pixel 0
    • #e1e1e1 28px : la première couleur s’arrête au pixel 28 (line-height)
    • #f6f6f6 28px : la deuxième couleur commence au pixel 28
    • #f6f6f6 56px : la deuxième couleur s’arrête au pixel 56 (line-height x 2)

Le code ↓ expliquer ici ↑

pre {
    line-height: 28px;
    background-size: 100% 56px;  
    background: repeating-linear-gradient(to bottom, #e1e1e1 0, #e1e1e1 28px, #f6f6f6 28px, #f6f6f6 56px);
    padding: 0px 2px 0px 15px;
}

CSS Intégrale, utilisé sur cette page pour la balise <pre>

 

  • content: attr(class); : le css va chercher la class de la balise pre pour l’afficher

 

pre[class]:before {
    <strong>content: attr(class);</strong>
    position: relative;
    top: -31px;
    float: right;
    margin: 0 25% 0 0;
    padding: 0;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform : uppercase;
    font-weight: bold;
    border-bottom: 3px solid #ff2828;
}
pre {
    display: block;
    font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
    white-space: pre-wrap;
    line-height: 28px;
    background-size: 100% 56px;  
    background: repeating-linear-gradient(to bottom, #e1e1e1 0, #e1e1e1 28px, #f6f6f6 28px, #f6f6f6 56px);
    border-left: 10px solid #d6d6d6;
    padding: 0 2px 0 15px;
    margin: 31px 0 15px 0;
}

Laisser un commentaire

Votre adresse de messagerie ne sera jamais publiée, ou utilisée à des fins commerciales. Les champs obligatoires sont indiqués avec des *.

Vous pouvez utiliser les balises de mise en forme