Striped Paragraphs in CSS

Introduction

I had a reason to create a paragraph which has striped lines (each line within the paragraph has a background). There are loads of ways to try to do this, notwithstanding using graphics. The graphics method is really tricky. Words in graphics tend to shrink too much on smaller devices – which can be pointless if you’re trying to use these words to convey a message.

The CSS Route

Not done properly, trying to add a background to a paragraph will look like this in Internet Explorer 11. That’s because IE11 sucks balls.

yvL6d

Source: Stack Overflow article. User: tibalt

An example CSS to create the above:

.striped-paragraph {
  display: inline;
  box-shadow: 10px 0 0 1px black, -10px 0 0 1px black;
  background: black;
  color: white;
}

The frustrating part is that code works fine in Chrome and Firefox. I didn’t test it on anything else.

It took me days to solve this problem. And that’s with a lot of help from the usual places. I eventually found a solution by applying what I found in this Stack Overflow article. Thank you tbb.

Working Styles

.width-80\25 {
	width: 80%;
	margin: 0 auto;
}
.striped {
	line-height: 28px;
	font-size: 20px;
}
.background-black {
	background-color: #000;
	color: white;
}
.background-black strong {
	color: white;
}
.paragraph-stripe-black {
	display: inline;
	-moz-box-shadow: 10px 0px 0px 0px black, 4px 0px 0px 0px black, 3px 0px 0px 0px black, 1px 0px 0px 0px black, -10px 0px 0px 0px black, -4px 0px 0px 0px black, -3px 0px 0px 0px black, -1px 0px 0px 0px black;
	-webkit-box-shadow: 10px 0px 0px 0px black, 4px 0px 0px 0px black, 3px 0px 0px 0px black, 1px 0px 0px 0px black, -10px 0px 0px 0px black, -4px 0px 0px 0px black, -3px 0px 0px 0px black, -1px 0px 0px 0px black;
	box-shadow: 10px 0px 0px 0px black, 4px 0px 0px 0px black, 3px 0px 0px 0px black, 1px 0px 0px 0px black, -10px 0px 0px 0px black, -4px 0px 0px 0px black, -3px 0px 0px 0px black, -1px 0px 0px 0px black;
	border-top: 1px solid black !important;
	border-bottom: 1px solid black !important;
}
.uppercase {
	text-transform: uppercase;
}

Here’s a working Pen.

Advertisements
This entry was posted in Web and tagged .