![]() Or, just use repeating-linear-gradient(): background: repeating-linear-gradient( You could use the same method as above for vertical stripes too. If you wanted to get crazy, you could transform: rotate() some element with these straight stripes and cut off the overflow, in which to replicate diagonal stripes with deeper browser support. See the Pen uxJrf by Chris Coyier ( on CodePen. But you could kinda fake it, especially for straight stripes, by making a small rectangle of background via background-size, drawing the stripes in there, and having it repeat naturally like background-image does. Those browsers don’t support repeating gradients. There is a super old syntax for CSS gradients that used -webkit-gradient() (note the no “linear” or “radial”). Straight Stripes (slightly better browser support) See the Pen qfHmw by Chris Coyier ( on CodePen. It’s not like this perfect rectangle that has to line up and repeat, it’s just a set of drawing instructions that repeats. That’s part of the beauty of the repeating-linear-gradient(). See the Pen gaKyv by Chris Coyier ( on CodePen. Again multiple backgrounds allows this to all happen on the same element. You could reveal part of the image by making some stripes fully transparent and some fully opaque. ![]() See the Pen xhkpD by Chris Coyier ( on CodePen. ![]() ![]() Because of multiple backgrounds (and stacking order), you can do that all together on a single element: background: If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. See the Pen epfEc by Chris Coyier ( on CodePen. Rather than the very last color-stop being 100% (or nothing, which means 100%) it’s a fixed value. I thought I’d document some variations in one easy to reference place.ĭiagonal stripes are easy to pull off thanks to repeating-linear-gradient(): background: repeating-linear-gradient( CSS gradients via the background-image property really got our back. Stripes are pretty easy to do in CSS these days. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |