A common scene of zebra stripes

When CSS3 gives us: nth-Child and: nth-of-Type, We often use this new property to implement the table \color{red}{table} table “zebra stripes” \color{red}{” zebra stripes “} “zebra stripes”. Previously we might have solved this style problem through javaScript. But what if we want to improve the readability of text or some code pieces by making the text look like zebra stripes?

Text zebra stripe solution

First of all, we can take a clumsy approach, such as wrapping each line of code in an element. We can also solve the problem through javaScript, but too many DOM elements may lead to performance problems of the page, and adding javaScript will lead to the increase of our logic. In fact, we can use pure CSS to solve this solution

We can set a uniform background image \color{red}{uniform background image} for the whole element, and then achieve the zebra stripe style by gradient \color{red}{gradient} gradient gradient once. We can also use em units \color{red}{em units}em units to set the background size, so that the background automatically ADAPTS to font size changes. Let’s look at a concrete example

<! We usually use <pre> <code> elements to display code, they have the default style given by the browser --> <! The pre element defines pre-formatted text. Text enclosed within a Pre element is usually reserved for Spaces and newlines. Text is rendered in a monospaced font. -- > <! The <code> tag is used to represent computer source code or other text that can be read by a machine. --> # html <pre> <code>while ( true ) { var d = new Date(); if (d.getDate() === 1 &amp; &amp; {d.g etMonth () = = = 3). The console log (' month of test time and date)}} < / code > < / pre >Copy the code

This is the default code snippet that we display with pre,code\color{red}{pre,code}pre,code element, and then we make it “zebra stripe” by adding styles.

  • First we need to create a horizontal stripe background with a linear gradient
  • \color{red}{background-size}{background-size}{background-size}{background-size} Because each background is the basis on which we need to repeat the loop, it needs to cover exactly two lines of code
pre { padding: .5em; The line - height: 1.5; background: #fff; background-image: linear-gradient(#fbe9eb 50%, #ecfdf0 0); // Gradient zebra bar color background-size: auto 3em; Font-family: Consolas, Monaco, Monospace; } code { font: inherit }Copy the code

The renderings of the initial attempt are as follows:

We’ve got the outline we want, but the code bar and the stripe are a little bit misplaced, mainly because our code bar starts at the top of the container, but our text has a.5em padding value, Color {red}{background automatically follow the width of the inner margin} background automatically follow the width of the inner margin. Css3 background-Origin allows browsers to parse background-positions using the outer edge of the Content-box as a baseline, rather than the default padding box. So we just need to add background− Origin :content−box to the CSS style; \color{red}{background-origin: content-box; } background – origin: the content – box; Ok, take a look at the final result ~

pre { padding: .5em; The line - height: 1.5; background: #fff; background-image: linear-gradient(#fbe9eb 50%, #ecfdf0 0); // Gradient zebra bar color background-size: auto 3em; Font-family: Consolas, Monaco, Monospace; background-origin: content-box; } code { font: inherit }Copy the code

conclusion

In the recent CSS reveal sharing, in fact, we use cSS3 several times some background properties, as well as the gradient properties, in daily development, we can through the combination of these properties is to achieve a lot of our unexpected effects ~ HOPE this article can share you can bring some help oh ~