Как сделать полосатый фон с градиентом?

@Danny14 · Регистрация: 07.03.2016

Студворк — интернет-сервис помощи студентам

Нужно сделать полосатый фон с градиентом . Вопрос:
1) Как это можно сделать на css3?
2) Как лучше делать, вырезать полоски из макета или все таки рисовать их на css3?

@Redzep · 25.04.2016, 12:05

del

@Fedor92 · 25.04.2016, 12:21

Сообщение от Danny14

Как лучше делать, вырезать полоски из макета или все таки рисовать их на css3?

Вырезаем одну полоску, с помощью свойства background-repeat:repeat-x репитим фон по оси X...

@Danny14 · 25.04.2016, 12:42 **[ТС]**

Только что так и сделал, это самый простой (насколько я понимаю кроссбраузерный) и быстрый вариант. Пока искал решение понял что градиентом можно сделать полоски одинакового размера и без перехода цвета, а в данном случае действительно легче вырезать, но если кто то знает способ это нарисовать на css было бы интересно увидеть.

@Fedor92 · 25.04.2016, 12:47

Сообщение от Danny14

но если кто то знает способ это нарисовать на css было бы интересно увидеть

Всегда поражался, как люди стремятся себе жизнь усложнить...

Ну-ну, самому интересно поглядеть на этот монстрокод...

@aj17 · 25.04.2016, 12:53

вот сайт с примерами , думаю все же лучше сделать его через CSS, на первый взгляд это не сложно

@Fedor92 · 25.04.2016, 13:02

Сообщение от aj17

на первый взгляд это не сложно

То на первый взгляд...

Только у ТС фон сложнее... Градиент изменяется сверху вниз(это не просто матрас) + если вёрстка кроссбраузерная отметаем 8 и 9 осёл сразу...

@Danny14 · 25.04.2016, 13:10 **[ТС]**

Сообщение от aj17

вот сайт с примерами , думаю все же лучше сделать его через CSS, на первый взгляд это не сложно

Та не, там как я и говорил просто полосатый фон, а тут нужно что бы полоски были с градиентом и разного размера. Тут действительно легче вырезать.

@aj17 · 25.04.2016, 13:20

Сделайте разного размера, не понимаю что Вас смущает))?

@Danny14 · 25.04.2016, 13:44 **[ТС]**

Сообщение от aj17

Сделайте разного размера, не понимаю что Вас смущает))?

По макету должно быть

Добавлено через 21 минуту
Точнее разного размера еще можно сделать, а вот в высоту сделать не представляю как

@aj17 · 25.04.2016, 14:59

Сообщение от Danny14

Точнее разного размера еще можно сделать, а вот в высоту сделать не представляю как

HTML5

1	<div class="grad"></div>

CSS

    .grad{
        width: 100%;
        height: 100px;
        position: relative;
      background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(125,185,232,1) 94%);
 
    }
    .grad:after{
        width: 100%;
        height: 100%;
        display: block;
        content: ' ';
        position: absolute;
        background: rgb(235,241,246);
        background: linear-gradient(to right,  rgba(235,241,246,1) 50%,rgba(0,0,0,0) 50%);
        background-size: 20px 100%;
        background-repeat: repeat-x;
    }

@Danny14 · 25.04.2016, 17:07 **[ТС]**

О, круто, действительно получилось как надо, спасибо. Я сделал количество цвета в градиенте по 5% и получились тонкие белые полоски.

@Danny14 3 / 3 / 2 Регистрация: 07.03.2016 Сообщений: 30
		1
	Как сделать полосатый фон с градиентом? 25.04.2016, 11:41. Показов 3269. Ответов 11 Метки нет (Все метки) Нужно сделать полосатый фон с градиентом . Вопрос: 1) Как это можно сделать на css3? 2) Как лучше делать, вырезать полоски из макета или все таки рисовать их на css3? 0

@Redzep 202 / 138 / 88 Регистрация: 21.12.2014 Сообщений: 369
	25.04.2016, 12:05	2
	del 0

@Fedor92 2964 / 2597 / 1068 Регистрация: 15.12.2012 Сообщений: 9,857 Записей в блоге: 11
	25.04.2016, 12:21	3
	Сообщение от Danny14 Как лучше делать, вырезать полоски из макета или все таки рисовать их на css3? Вырезаем одну полоску, с помощью свойства background-repeat:repeat-x репитим фон по оси X... 0

@Danny14 3 / 3 / 2 Регистрация: 07.03.2016 Сообщений: 30
	25.04.2016, 12:42 [ТС]	4
	Только что так и сделал, это самый простой (насколько я понимаю кроссбраузерный) и быстрый вариант. Пока искал решение понял что градиентом можно сделать полоски одинакового размера и без перехода цвета, а в данном случае действительно легче вырезать, но если кто то знает способ это нарисовать на css было бы интересно увидеть. 0

@Fedor92 2964 / 2597 / 1068 Регистрация: 15.12.2012 Сообщений: 9,857 Записей в блоге: 11
	25.04.2016, 12:47	5
	Сообщение от Danny14 но если кто то знает способ это нарисовать на css было бы интересно увидеть Всегда поражался, как люди стремятся себе жизнь усложнить... Ну-ну, самому интересно поглядеть на этот монстрокод... 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.04.2016, 12:53	6
	вот сайт с примерами , думаю все же лучше сделать его через CSS, на первый взгляд это не сложно 0

@Fedor92 2964 / 2597 / 1068 Регистрация: 15.12.2012 Сообщений: 9,857 Записей в блоге: 11
	25.04.2016, 13:02	7
	Сообщение от aj17 на первый взгляд это не сложно То на первый взгляд... Только у ТС фон сложнее... Градиент изменяется сверху вниз(это не просто матрас) + если вёрстка кроссбраузерная отметаем 8 и 9 осёл сразу... 0

@Danny14 3 / 3 / 2 Регистрация: 07.03.2016 Сообщений: 30
	25.04.2016, 13:10 [ТС]	8
	Сообщение от aj17 вот сайт с примерами , думаю все же лучше сделать его через CSS, на первый взгляд это не сложно Та не, там как я и говорил просто полосатый фон, а тут нужно что бы полоски были с градиентом и разного размера. Тут действительно легче вырезать. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	25.04.2016, 13:20	9
	Сделайте разного размера, не понимаю что Вас смущает))? 0

@Danny14 3 / 3 / 2 Регистрация: 07.03.2016 Сообщений: 30
	25.04.2016, 13:44 [ТС]	10
	Сообщение от aj17 Сделайте разного размера, не понимаю что Вас смущает))? По макету должно быть Добавлено через 21 минуту Точнее разного размера еще можно сделать, а вот в высоту сделать не представляю как 0

	25.04.2016, 17:07

Опции темы

@Danny14 3 / 3 / 2 Регистрация: 07.03.2016 Сообщений: 30
	25.04.2016, 17:07 [ТС]	12
	О, круто, действительно получилось как надо, спасибо. Я сделал количество цвета в градиенте по 5% и получились тонкие белые полоски. 0

Как сделать полосатый фон с градиентом?

Решение