web-dev-qa-db-fra.com

Zones de texte CSS Styling telles que notebook-look

Il est possible de styliser une zone de texte afin que chaque ligne soit soulignée par un pointillé.

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

htmlcsstextarea
39
content01

Voici probablement ce que vous recherchez:

line

<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 with style example
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Line 6
    Line 7
    Line n
</textarea>

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

Créer un fond de cahier

83
Book Of Zeus

CSS3 pur

<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://jsfiddle.net/Wolfsblvt/qc9rgm7r/

39
Alan Souza

Si vous êtes toujours intéressé par ce sujet, vous pouvez consulter les Exemples de zones de texte sur papier - créées avec css uniquement sur le blog de Fivera ..__ Un aspect intéressant est que vous pouvez jouer avec les exemples sur le champ.

1
George

Ces solutions ne prennent pas en charge le débordement de texte. Donc, le défilement ne fait que faire défiler le texte, pas l'arrière-plan. Pour prendre en charge le défilement, vous devez ajouter “ background-attachment: local; ”à la css textarea.

1
Morten Riis

Scroll défonce chaque solution. Une solution complète à cette fin doit également faire défiler les lignes avec du texte. Ceci est difficile à réaliser en ajoutant simplement une image d’arrière-plan à une zone de texte.

0
Pablo Pazos

J'ai pris le autre réponse et l'ai 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 sera dimensionné en conséquence.

De plus, j'ai ajouté un autre exemple qui utilise une div éditable au lieu d'une textarea.

example

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, je viens donc d'inclure 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>

0
Benny Bottema