Comment dessiner plusieurs lignes horizontales (effet papier ligné) à l'aide de CSS ?

Question

Je suis en train d'essayer de créer un papier ligné sur mon blog, et je voulais y ajouter des lignes horizontales. J'ai réussi à dessiner une ligne horizontale en utilisant du CSS, mais je n'arrive pas à trouver un moyen de la répéter pour qu'elle remplisse toute la page.

Voici mon code CSS :

.horizontalLines {
 border-bottom: 2px solid #CCCCCC;
 padding-top: 25px;
 width: 100%;
}

Ce code ne me permet de créer qu'une seule ligne, comment puis-je en créer plusieurs ?

Answer 1

Comme solution alternative, il y a un bel effet de papier ligné écrit en CSS disponible ici.

background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

Support du navigateur: Les motifs eux-mêmes devraient fonctionner sur Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ et IE10+. Cependant, des limitations d'implémentation pourraient faire en sorte que certains d'entre eux ne soient pas affichés correctement même sur ces navigateurs (par exemple, au moment de l'écriture, Gecko est assez bogué avec les dégradés radiaux).

Answer 2

En utilisant votre méthode, vous devez insérer plusieurs de ces éléments. Vous ne pouvez pas simplement les répéter.

Une autre façon - et je suppose plus appropriée - serait d'utiliser une image d'arrière-plan que vous répétez horizontalement et verticalement pour obtenir cet effet.

body {
    background: transparent url(chemin/nomfichier) repeat 0 0;
}

Ou, si vous pouvez utiliser des dégradés, la réponse de nikhita dkslfslg (+1 pour cela) pourrait vous aider.

Answer 3

Voici.

.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");

}

Il suffit d'encoder une image en base64 et ça fonctionne bien.

Vous pouvez essayer d'encoder ICI.

Answer 4

Vous pouvez le faire avec des ombres de boîtes :

.lines{
    width:500px;
    height:400px;
    background: red;
    box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}

http://jsfiddle.net/7DkKc/

Ou simplement avec des images :

.lines{
    background: transparent url(url) 0 0 repeat-x;
}

Ou avec des dégradés.

http://www.colorzilla.com/gradient-editor/