Repeat line in css

repeating — linear — gradient ( )

Создаёт фон в виде полос из повторяющегося линейного градиента.

Пример

Скопировать ссылку «Пример» Скопировано

Зададим узор из чёрно-оранжевых полос.

 div  background-image: repeating-linear-gradient( -45deg, black 0, black 25px, orange 25px, orange 50px );> div  background-image: repeating-linear-gradient( -45deg, black 0, black 25px, orange 25px, orange 50px ); >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Повторяющийся линейный градиент принимает те же аргументы, что и обычный linear — gradient . Но, в отличие от него, повторяет узор из линий до тех пор, пока не заполнит весь элемент.

Лучше всего разница между двумя градиентами видна на примерах. Зададим повторяющийся линейный градиент в виде зебры.

 div  background-image: repeating-linear-gradient( to right, white 0 10%, black 10% 20% );> div  background-image: repeating-linear-gradient( to right, white 0 10%, black 10% 20% ); >    Скопировать Скопировано Не удалось скопировать   

Когда полоска чёрного цвета заканчивается на 20%, градиент снова наполняется белыми и чёрными полосами, хотя мы не задавали их снова, — поэтому он называется повторяющимся линейным градиентом. Такой эффект не сработает с обычным linear — gradient .

 div  background-image: linear-gradient( to right, white 0 10%, black 10% 20% );> div  background-image: linear-gradient( to right, white 0 10%, black 10% 20% ); >    Скопировать Скопировано Не удалось скопировать   

Когда чёрная полоска достигла 20%, градиент не повторился, а лишь заполнил фон элемента последним цветом.

Полосы repeating — linear — gradient ( ) не обязательно всегда такие ровные. Если каждый следующий цвет не начинается в точке окончания предыдущего, то линии смажутся, и фон примет иной вид.

 div  background-image: repeating-radial-gradient( 0.50turn, yellow 0 30px, white 70px 80px, aqua 100px 130px );> div  background-image: repeating-radial-gradient( 0.50turn, yellow 0 30px, white 70px 80px, aqua 100px 130px ); >    Скопировать Скопировано Не удалось скопировать   

Источник

Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I’d document some variations in one easy to reference place.

Normal Colored Diagonal Stripes

background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );

Rather than the very last color-stop being 100% (or nothing, which means 100%) it’s a fixed value. Beyond that, it just kinda starts over. This is how I think of it (zoomed in): See the Pen epfEc by Chris Coyier (@chriscoyier) on CodePen.

Gradient Diagonal Stripes

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. Because of multiple backgrounds (and stacking order), you can do that all together on a single element:

background: /* On "top" */ repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ), /* on "bottom" */ linear-gradient( to bottom, #eee, #999 );

Perhaps a texture? Any image will work. You could reveal part of the image by making some stripes fully transparent and some fully opaque. Or, any combination. Again multiple backgrounds allows this to all happen on the same element.

It doesn’t have to be exactly 45degrees. That’s part of the beauty of the repeating-linear-gradient(). It’s not like this perfect rectangle that has to line up and repeat, it’s just a set of drawing instructions that repeats.

background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px );

Straight Stripes (slightly better browser support)

There is a super old syntax for CSS gradients that used -webkit-gradient() (note the no “linear” or “radial”). Basically: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Old stuff. Those browsers don’t support repeating gradients. 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.

background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b ); /* The rectangle in which to repeat. It can be fully wide in this case */ background-size: 100% 20px;

See the Pen uxJrf by Chris Coyier (@chriscoyier) on CodePen. 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. Sounds like a lot of work.

You could use the same method as above for vertical stripes too. Or, just use repeating-linear-gradient() :

background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px );

See the Pen oCpEu by Chris Coyier (@chriscoyier) on CodePen. Just to be clear, with repeating-linear-gradient() you are best off doing a -webkit-repeating-linear-gradient() as well as the unprefixed one, if you’re, you know, prefixing buy yourself which you shouldn’t.

/* Note the RADIAL */ background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px );

Sometimes rounding errors (maybe?) or other kinda rendering funkiness happens. Whattyagonnado. I suspect it will get better over time. Update: Christopher Cohen writes in:

You can defeat funky town by setting percentage-based stops and using background-size . I don’t know if Chrome just calculates to a different precision for % vs px, but I found this got me beautifully neat lines. Another quick tip; sometimes you need to specify background-attachment: fixed or it ignores background-position . This is useful when styling progress bars, etc., with overlapping gradient-filled boxes.

Источник

Css make cool repeating linear gradient lines

Solution 1: i solved using a double gradient background image, hiding the first line with the first of the two gradients Solution 2: If an inner div is not a problem, hiding the left grey line behind and outer div with overflow:hidden works: https://jsfiddle.net/jz7ag7L1/1/ Solution: Here is a different way. Maybe you won’t have issue with it: Solution 1: This is a confirmed bug in Chrome.

Manipulating repeat linear gradient

i solved using a double gradient background image, hiding the first line with the first of the two gradients

background-image: linear-gradient(to right, white, white 1px, transparent 0, transparent 100%),repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 16.66667%); 

If an inner div is not a problem, hiding the left grey line behind and outer div with overflow:hidden works:

.container .inner < background-image: repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 20%); min-height: 5000px; margin-left: -1px; >.container < max-width: 904px; margin:0 auto; overflow: hidden; > https://jsfiddle.net/jz7ag7L1/1/

CSS: how to create an infinitely-moving repeating linear gradient?, You need to run the animation a bit longer before looping back. Awesome man. Simply setting the background position to -33% was enough.

Use CSS Linear Gradients for Cool Gradients and Stripes

You can use the linear-gradient() and repeating-linear-gradient() background values to Duration: 6:56

How to create CSS linear-gradient effects?

Linear Gradient CSS & Repeating Linear Gradient CSS

This video demonstrates the use of linear gradient css function and how to use it effectively Duration: 8:41

CSS repeating-linear-gradient line width difference issue

Here is a different way. Maybe you won’t have issue with it:

How to draw dashed and solid vertical lines with css gradient, How to make a CSS background gradient with 90deg lines. Should start with no line, then one solid line, and the next 3 lines dashed.

How to make repeating-linear-gradient for a table continue seamlessly over multiple cells?

This is a confirmed bug in Chrome. Given that it was first reported in 2010 (when Gecko actually had the same bug) and is currently marked WONTFIX I wouldn’t hold my breath for a real fix. You could open a new bug, it might be ‘doable’ now.

As a workaround: put the stripes on the table so as not to confuse the rendering mechanisms, then instead of styling the rows ‘to be striped’, unstyle the other rows, like this:

table.striped < background: repeating-linear-gradient( 45deg, #FFFFFF, #FFFFFF 10px, #DDDDDD 10px, #DDDDDD 20px ); >tr:not(.striped) < background:white; /* or any color that would normally be behind the table */ >

This way it still works as if you’re highlighting only the indicated row as you intend. If for some reason there is a non-opaque background behind the unstyled rows you’re probably flat out of luck because of this bug.

Updated codepen. Works identically in IE, FF and Chrome without ‘hickups’.

You can define background-attachment: fixed; to the tr , as you can see on this updated Codepen http://codepen.io/anon/pen/NGaBzP.

This solution was presented by Chris Coyier here https://css-tricks.com/stripes-css/ Look for the Funky Town part.

The gradient will stay fixed as you scroll the page, but it’s better than a ‘jagged’ style.

Can you move the .striped class to the table instead of the row?

 
hi
 
there
 
dear css observer
 
 
 

How to remove banding of gradient background, You need to make your container (the html element) 100% tall, and use no-repeat to stop the repeating pattern of the background gradient.

Create Responsive Repeating Various Height Vertical Line Pattern with CSS

Yes, it is definitely possible to create this pattern using linear-gradient background images. Unlike the pattern generated by Chris Coyier, this would require two linear gradients as there are two stripes of different heights and gaps.

Below snippet has the same pattern added into your code:

.module < background: white; border: 1px solid #ccc; margin: 3%; >.module > h2 < padding: 1rem; margin: 0 0 0.5rem 0; >> .module > p < padding: 0 1rem; >.stripe-6

You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.
 

CSS Gradients, To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a

Источник

How to make dashed line using HTML and CSS

In this article, we will see how we can make a dashed line using HTML and CSS.

Here, we will make dashed line using < hr >and < div >tags with come help of CSS styling.

Method 1 : Using hr tag and CSS

Here, we will use the < hr >tag that creates a horizontal line. And then we will add a class name to it and use border property to create the dashed line.

body> hr class="dashed-line"> body> 

.dashed-line < border: 2px dashed red; > 

Here, we have added a class dashed-line and added a border of 2px dashed with the color red.

Method 2 : Using repeating-linear-gradient in CSS

We can also use the repeating-linear-gradient() function with the background CSS property to create a gradient line with dashed pattern on our HTML website.

The repeating-linear-gradient() function is used to create an image that repeats a linear gradient.

We can use this repeating gradient to create a dashed line in HTML.

background-image: repeating-linear-gradient( angle | to side-or-corner, color-stop1, color-stop2, . ); 

angle | to side-or-corner : degree and direction of the linear gradient.

color-stop : Color values with one or two stop positions (given in percentage or length along the gradient’s axis).

body> div class="line"> div> body> 

.line < margin: 5px 0; height: 5px; background: repeating-linear-gradient( to right, transparent, transparent 10px, black 10px, black 20px ); /*10px transparent then 10px black -> repeat this!*/ > 

In the code above, the transparent color is from 0 to 10px and the black color starts from 10px and stops at 20px. And since it’s repeating itself, it will create a dashed line on our html page.

Источник