CSS Styliser les zones de texte à la manière d'un bloc-notes

Question

Est-il possible de styliser une zone de texte de manière à ce que chaque ligne soit soulignée en pointillé (comme dans un cahier ou un bloc-notes) ? soulignée (comme dans un cahier ou un bloc-notes) ?

Le nombre de lignes doit être fixé à 10, par exemple.

Answer 1

Voici probablement ce que vous cherchez :

<style type="text/css">
textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>
<textarea></textarea>

cela produira un résultat :

ou vous pouvez lire cet article qui vous explique comment le faire à partir de zéro :

Création d'un arrière-plan de carnet de notes

Answer 2

Pure CSS3

<style>
    html{ height: 100%; }
    body
    {
        background-color: #f5f5f5;
    }
    textarea
    {
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Marck Script',cursive;
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 
        background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }
</style>

le résultat vous pouvez voir ce lien : http://alanicolasouza.com/labs/css3-notebook-paper/

Answer 3

J'ai pris le autre réponse et l'a mis à jour en SCSS pour le rendre configurable. Vous pouvez maintenant facilement changer la taille et la couleur des trous et des règles et tout s'adaptera en conséquence.

J'ai également ajouté un autre exemple qui utilise un div modifiable au lieu d'un textarea.

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

Malheureusement, Stackoverflow ne supporte pas SCSS, donc j'ai juste inclus un instantané d'une configuration fixe ici :

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  -webkit-background-size: 100% 20px;
  background-size: 100% 20px;
}

<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>

Answer 4

Ces solutions ne prennent pas en charge les zones de texte débordantes. Le défilement ne fait donc défiler que le texte et non le fond. Pour supporter le défilement, vous devez ajouter " background-attachment : local ; " à la css de la zone de texte.

Answer 5

Si vous êtes toujours intéressé par ce sujet, vous pouvez consulter le site web de la Commission européenne. Texte papier Exemples de zones - créés uniquement avec css sur le blog de fivera. Ce qui est cool, c'est que vous pouvez jouer avec les exemples sur place.