Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save SynCap/e43cbda6ef3589eaaf7903f5c82d1677 to your computer and use it in GitHub Desktop.
Save SynCap/e43cbda6ef3589eaaf7903f5c82d1677 to your computer and use it in GitHub Desktop.
CSS3: striped (zebra) background for any text

CSS3: striped (zebra) background for any text

Zebra style background for text, code, etc. Applicable to any brightness or hue of base color for background. Try to change it. To check corrections for sizes, try to set large enough quantity of lines (100 - 300) in HTML template.

A Pen by SynCap on CodePen.

License.

.striped
- lines = 30 // try to play with this
- for (i = 1; i <= lines; ++i)
p #[b.rt #{i}.] Line of text
// try to play with this
@lineHeight: 1.2em;
body {
padding: 5% 20%;
font-size: 16pt;
background: #ccc
url('http://sosst.tk/~lucia.uhrincova/images/obr2.jpg')
no-repeat center fixed;
background-size: 100% 100%;
}
.rt {
display: inline-block;
width: 3em;
text-align: right;
}
.striped {
border: 1px solid #ccc;
border-radius: .3em;
margin:0;
/* Magic lives here */
padding: @lineHeight;
padding-top: @lineHeight - .15em;
background:
linear-gradient(
rgba(255,255,255, .1) 50%,
rgba( 0, 0, 0, .1) 50%);
background-size:100% 1.99*@lineHeight;
background-origin: border-box;
}
p {
line-height: @lineHeight; /* …and here */
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment