1

Is it possible to create multiple horizonal evenly spaced lines using only CSS? I am trying to replicate the look of a notecard and I would prefer not to use images. Seems like this should be possible. It looks like this person accomplished what i want to do, but they are using mozilla specific tags: Fiddle

Guess I have to add in code if I include a fiddle link. The CSS from that page:

div {
background: 
-moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
border: 1px solid #f6f6f6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 30px auto;
padding: 22px 15px 40px;
position: relative;
width: 400px;
color: #444;
}
h1 {
    font: 24px/26px 'Helvetica Neue', Arial;
    margin: 0 0 6px;
}
li {
    font: 12px/16px Georgia;
    margin: 0 0 7px;
}

div:before {
    content: '';
    z-index: -1;
    width: 433px;
    position: absolute;
    bottom: -12px;
    left: 4px;
    height: 190px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  background:    -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
    -moz-transform: rotate(-1deg);
}

div:after{
    content: '';
    z-index: -3;
    width: 433px;
    position: absolute;
    bottom: -18px;
     left: 6px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    height: 190px;

    background:    -moz-repeating-linear-gradient(center top , #fafafa, #fafafa 22px, #81CBBC 24px) repeat scroll 0 0 transparent;
  -moz-transform: rotate(-1deg);
}
JGrinon
  • 1,453
  • 1
  • 14
  • 36
dmikester1
  • 1,374
  • 11
  • 55
  • 113
  • So all you want is someone to update / extend the gradient syntax? http://www.colorzilla.com/gradient-editor/ – Paulie_D Jan 28 '14 at 20:23
  • 1
    I have a half answer, so I'll just comment: if there is, it's probably not cross-browser friendly. So I'd use `background-image` with a base64-encoded image. That's technically "pure CSS". :) (Side note: I'm understanding you want a pure CSS way to render the lines *ON* the note card (where you would write text), not lines *UNDER* the note card representing multiple cards.) – bishop Jan 28 '14 at 20:25
  • I like that idea, is there a site that will help me create a base64 encoded image of what I want? – dmikester1 Jan 28 '14 at 20:29
  • that is right, lines on the card itself – dmikester1 Jan 28 '14 at 20:29
  • 1
    Quick google search turns up several tutorials: http://www.techrepublic.com/blog/web-designer/how-to-get-the-ruled-paper-background-effect-with-css3/#. – kthornbloom Jan 28 '14 at 20:30
  • 1
    This may already be answered here: [link](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient) – Brian Flanagan Jan 28 '14 at 20:33
  • Thanks hthornbloom and Brian, those links are very helpful. I should be able to figure it out from those 2 links. I had googled quite a bit, but I guess I used the wrong terms. – dmikester1 Jan 28 '14 at 20:37

1 Answers1

0

Is this what you mean?

Fiddle

box-shadow:0 1px 0 1px #fff, 0 2px 0 1px #ccc, 0 4px 0 1px #fff, 0 5px 0 1px #ccc;
JGrinon
  • 1,453
  • 1
  • 14
  • 36
kthornbloom
  • 3,660
  • 2
  • 31
  • 46