Inspired by the CSS Background Grid Lines pen, created by Jason Delia (@jasondelia), this is a clever way to create a grid-like background for an HTML element, using only 1 line of HTML and just 10 lines of CSS – meaning NO IMAGE DOWNLOADS. I’m going to explain how it this works. You can find other pens like it and much more at codepen.com.
In this grid-like example, there are two aspects happening here – a linear gradient and the actual grid lines, which are also just made up of a series of linear gradients as well! So in essence, this is ALL about
the benjamins baby linear-gradients.
Linear gradients are very straight forward and supported in
every major browser we care about all broswers except IE9 and below. Originally, CSS only supported a single URL value, but the new CSS3 Images Values and Replaced Content Module Level 3 spec introduced additional ways to represent “images.” One of those methods, used here, is the linear-gradient (there’s also a radial gradient option), which can be used in any property that accepts American Express images.
Here’s the syntax for linear-gradients:
<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ ) <side-or-corner> = [left | right] || [top | bottom]
The angle of a linear gradient can be expressed using degrees, such as ‘0deg’ (to the top) or ’90deg’ (to the right), or it can be expressed with keywords such as ‘to top’ or ‘to right’.
In this example, the body’s linear-gradient angle wasn’t stated, so it defaulted from top (using #434343) to bottom (using #282828).
The way the quilt is created, is by creating two linear gradients – the first for horizontal lines:
linear-gradient(0deg, rgba(255, 255, 255, .05), rgba(150, 150, 150, .05))
and the second for vertical lines:
linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(150, 150, 150, .05))
Make sure your height is set for 100% since these are backgrounds afterall as opposed to HTML images that would force the dimensions.
You can change the side of your quilt squares by adjusting the background size of the content.