CSS3: repeating-linear-gradient

329
14 июня 2018, 06:40

Я сделала следующий гардиент для фона:

Возможно ли изменить направление красно-черного градиента полосок, чтобы, например, градиент имел направление to bottom (красный цвет был вверху, а черный внизу на полосках)?

Примерно так:

.bg { 
  width: 200px; 
  height: 300px; 
  background: 
    repeating-linear-gradient(90deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px), 
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); 
}
<div class="bg"></div>

Answer 1

Использовать тут JS — совсем крайний случай, так как от этого будет сильно страдать производительность и сопровождаемость вашего кода.

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

Поэтому сделаем картинку с помощью SVG: прямоугольник, который занимает 50% ширины картинки с нужным нам градиентом.

svg { 
  /* бесконечная серая тень чтобы выделить саму картинку */ 
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.1); 
}
<svg> 
  <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" > 
    <stop  offset="0" style="stop-color:#d43434"/> 
    <stop  offset="1" style="stop-color:#000"/> 
  </linearGradient> 
  <rect width="50%" height="100%" fill="url(#gradient)"  /> 
</svg>

Далее либо сохраним эту картинку и используем ссылку на неё (предпочтительно), либо зашифруем её (к примеру, с помощью этого сервиса) для использования в CSS:

.bg { 
  width: 200px; 
  height: 300px; 
  background:  
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='gradient' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='0' y2='1' %3E%3Cstop offset='0' style='stop-color:%23d43434'/%3E%3Cstop offset='1' style='stop-color:%23000'/%3E%3C/linearGradient%3E%3Crect width='50%25' height='100%25' fill='url%28%23gradient%29' /%3E%3C/svg%3E") 0 0 / 40px 100% round, 
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); 
}
<div class="bg"></div>

В примере выше данному SVG установлен background-size: 40px 100% и background-repeat: repeat-x.

Answer 2

Если мы не можем вывести стандартно градиент по каким то причинам, то сделаем через циклы, что бы не городить эти span. Я их вывел в цикле на JS, ну а стилизовал в CSS. Смотрите:

var Temp = document.getElementById("elem").innerHTML; 
for (var n = 1; n <= 29; n++) { 
  Temp += "<span></span>"; 
  document.getElementById("elem").innerHTML = Temp; 
}
.item { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
} 
 
.item span { 
  display: block; 
  width: 10%; 
  height: 100vh; 
} 
 
span:nth-child(odd) { 
  background: linear-gradient(rgba(162, 40, 40, .8), #000); 
} 
 
span:nth-child(even) { 
  background: linear-gradient(lightblue 0%, green 30%, orange 70%); 
}
<div id="elem" class="item"></div>

Answer 3

180deg — могли бы и сами циферки поправить

body { 
  width: 200px; 
  height: 300px; 
  background: 
    repeating-linear-gradient(180deg, #d43434 0px, #000 20px, transparent 20px, transparent 40px), 
    linear-gradient(to bottom, #04bcef 0%, #ed8200 53%, #ed8200 100%); 
}

READ ALSO
Как при увеличении одного блока сделать так чтобы он не толкал другой блок
CSS

Как при увеличении одного блока сделать так чтобы он не толкал другой блок

Возможно ли сделать так, чтобы при увеличении одного блока он не толкал другой блок без использования position: absolute? Как видите я тут поставил...

 226
Подключение less (выдает ошибку в браузере)
CSS

Подключение less (выдает ошибку в браузере)

Первый раз подключаю lessвсе работает, но в хроме ошибки выдает

 203
Отправка данных с формы в формате JSON на сервер
javascript

Отправка данных с формы в формате JSON на сервер

надо отправить на сервер данные введенные в контактной формы на сайте, в формате JSON (на сервере CORS запрос разрешен) при отправке получаю Status...

 216
Как передать конструктор из класса от которого не наследоавл
javascript

Как передать конструктор из класса от которого не наследоавл

как классу C передать конструктор от A если он уже наследует от B ? желательно пример с функцией call или bind

 183