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 ); >
Как создать мультиградиент с помощью CSS?
Возможно ли создание мультиградента в одном блоке div?
То есть, имеем блок , и следует прописать CSS в виде разных градиентов и разных высот этих градиентов в данном блоке без побочных плагинов и других тегов!
Фон из градиентов в одном блоке
Все что видел, это один градиент на один блок. Можно конечно нарисовать картинку с градиентами, и потом вставить как фон, но не хотелось бы прибегать к методам 90-00х.
именно такую конфигурацию, как у вас, градиентами на одном элементе сделать не получится.
да, можно делать несколько слоёв, да, можно делать несколько зон в одном градиенте, но тут явно несколько блоков с горизонтальными градиентами в разные стороны, которые не получится свести к одному с наложениями или ограничить по высоте.
с другой стороны, если конкретный рисунок не догма (а он, прямо скажем, не шедевр), можно сделать похожий с горизонтальным градиентом в одну сторону и вертикальным поверх. примерно так:
если постараетесь подобрать цвета, вполне может получиться довольно похоже на ваш рисунок.
Спасибо. Картинка была в качестве примера и поэтому он не шедевр)), шедевра гораздо больше))
У вас вариант хороший, но не то что я хотел конечно. Придется еще покопаться.
Указывайте более 2х цветов в объявлении градиента
Как пример — linear-gradient(to bottom, #39ff08 20%, #ffeb00 40%, #f50000 80%, #000);
Лучше всего применение градиента описано по ссылке htmlbook.ru/CSS3-na-primerakh/lineinyi-gradient , там же пример узора background при помощи градиента.
Upd: написал позднее Дмитрия Гончарова и увидел это опосля.
Последую его примеру и приложу ещё одну ссылку на автоматическое создание градиента, но, как по мне, более удобный — https://www.css-gradient.com
Может я не так объясняю. Все эти инструменты мне знакомы.
Все эти генераторы дают «один градиент», в котором могут быть разные смешения цветов.
А мне нужно в блоке получить несколько градиентов которые идут друг за другом, причем разной высоты и еще между ними надо поместить простые линии цветовые и не только между ними, а еще и поверх градиентов в некоторых местах. И каждый нижний градиент должен быть без плавного перехода, ровной линией.
Смотрите картинку выше.
How to combine two css3 gradients ?
I’ve Two CSS for HTML BODY Background I’m using this css as background of my page ; i want to overlap these two and get combined effect?
/* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Opera */ background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Opera */ background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%); repeating-linear-gradient()
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function’s result is an object of the data type, which is a special kind of .
Try it
The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.
As with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
Because s belong to the data type, they can only be used where s can be used. For this reason, repeating-linear-gradient() won’t work on background-color and other properties that use the data type.
Syntax
/* A repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45deg, blue, red 33.3%); /* A repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* A gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red. This gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* A gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
Values
The position of the gradient line’s starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side ( left or right ), and the other the vertical side ( top or bottom ). The order of the side keywords does not matter. If unspecified, it defaults to to bottom .
The values to top , to bottom , to left , and to right are equivalent to the angles 0deg , 180deg , 270deg , and 90deg respectively. The other values are translated into an angle.
The gradient line’s angle of direction. A value of 0deg is equivalent to to top ; increasing values rotate clockwise from there.
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.