33 votos

El Estilo CSS áreas de texto como notebook-look

Es posible que el estilo de un área de texto para que cada fila tiene un puntillo subrayado (como un cuaderno de notas o notas de bloque)?

El número de líneas que debe ser corregido para que digamos 10.

73voto

Book Of Zeus Puntos 38130

Esto es probablemente lo que usted está buscando:

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>

esta es la salida:

result

o puedes leer este artículo que te dice cómo hacerlo desde cero:

La creación de un Cuaderno de Fondo

32voto

Alan Souza Puntos 149

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>

el resultado se puede ver en este enlace: http://alanicolasouza.com/labs/css3-notebook-paper/

-2voto

ratbum Puntos 460

Usted querrá tener divs para cada línea de texto que se insertará con una regla de estilo similar a este:

.line_class {
    border-bottom: 1px black dotted;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: