CSS3: striped (zebra) background for any text

css3-striped-zebra-background-for-any-text.markdown

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.

index.jade

.striped
	- lines = 30 // try to play with this
	-	for (i = 1; i <= lines; ++i)
		p #[b.rt #{i}.] Line of text

style.less

// 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;
}