CSS3: repeating-linear-gradient

347

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%); 
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

248

CSS

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

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

221

javascript

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

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

237

javascript

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

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

203