soy Kseso y esto EsCSS

Papel de notas rayado puro Css

Papel de notas rayado puro Css

·Por Kseso ✎ 0

Papel de notas rayado puro Css

Este contenido lo puedes editar: añadir o eliminar lo que quieras, pero sólo en tu máquina.


La edicción se basa en el atributo html5 "contenteditable"

El rayado está logrado con gradientes css (background: linear-gradient), tanto el horizontal como el vertical

La coincidencia entre el rayado horizontal y el texto en base a font-size y line-height, coincidentes con los valores en la repetición del gradiente.

Y el marcado html, de lo más sencillo:

HTML

  1.  <div class="papel" contenteditable>
  2.    <h4>Papel de notas rayado puro Css</h4>
  3.    <p>Este contenido lo puedes editar: añadir...</p>
  4.  </div>
El resto viene de la mano del Css utilizado:
.papel_rayado { border: 1px solid #CDCDCD; box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.5); font: 10pt/20px monospace; margin: 10px auto; min-height: 200px; padding: 62px 8% 35px 8%; position: relative; text-align: justify; width: 60%; /* gradients - second red border, first red border, top white space, blue lines */ background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px); background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px); background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px); background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px); background-image: linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px); background-size: 1px, 1px, auto, auto 20px; background-repeat: repeat-y, repeat-y, no-repeat, repeat; background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px; } .papel_rayado:before, .papel_rayado:after { border-radius: 10px; background: rgba(255,255,255,1); box-shadow: inset 2px 2px 5px rgba(125,125,125,1), 2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75), 2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5), 2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25); content: ""; display: block; height: 20px; left: 4%; position: absolute; top: 35px; width: 20px; z-index: 10; } .papel_rayado:after {top: 87%;} .papel_rayado:focus { outline: none; } .papel_rayado h4 { color: red; font-size: 35px; margin-bottom: 20px; margin-top: 18px; }

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso